需要帮助在联系人表单字段中显示div内容(仅限javascript)

Question

我希望你没事！

我有一个无法解决的问题，但由于对Javascript缺乏经验，我尽量乐观地认为我的问题可能没有那么复杂。。。或者是的？

对于我的项目，我有几个div用于显示一个数字(每个div不同(。

当显示一个div时，其他div将被隐藏。

我需要在联系人表单字段中显示div的编号。

也许用这样的配方？

<div id="div1" style="display:none;">349</div>
<div id="div2" style="display:block;">142</div>
<div id="div3" style="display:none;">47</div>
INSIDE MY FORM:
<input type="text" value="If DIV2 display block, show Content(142 in this example)" readonly />

有人知道这是否可能吗？如果可能，如果显示另一个div(无需刷新页面(，是否可以更新联系人表单字段中显示的号码

提前感谢您抽出时间&想法！

Answer 1

这就是您可以做到的：

<div id="div1" class="box hidden" onclick="setValue()">349</div>
<div id="div2" class="box" onclick="setValue()">142</div>
<input type="text" >

.hidden {
display: none;
}

function setValue() {
let boxes = document.querySelectorAll(".box");
[...boxes].forEach(box => {
box.classList.toggle("hidden");
if (!box.classList.contains("hidden")) {
document.querySelector("input").value = box.innerText;    
}
})
}