我已经审查了大量的文章,所有的解决方案都只更新视觉显示的值,而不是输入标签本身的实际值。
当我点击一个按钮时,会出现一个带有文本输入的模态,我们称之为input1
在输入代码并退出模态时,按钮会更新为输入的代码,隐藏的输入值也会更新。但是实际的tags value="”保持不变。
我已经尝试了许多方法,但似乎都只更新视觉,而不是真正的价值。
这是我到目前为止所做的,但它只更新了你在浏览器中看到的值,而不是标签本身。
let promoModal = document.getElementById("promoModal");
let promoBtn = document.getElementById("promo");
let promoSpan = document.getElementsByClassName("promoClose")[0];
promoBtn.onclick = function() {
promoModal.style.display = "block";
}
promoSpan.onclick = function() {
promoModal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == promoModal) {
promoModal.style.display = "none";
}
}
function updatePromo() {
let promoValue = document.getElementById("promo-value");
let producePromo = document.getElementById("promo");
let copyPromo = document.getElementById("promo-value-copy");
producePromo.innerHTML = promoValue.value;
copyPromo.innerHTML = promoValue.value;
}
/* THE MODAL */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 5px 20px;
border: 1px solid #888;
width: 280px;
position: relative;
}
}
/* The Close Button */
.adultClose,
.promoClose {
color: #aaaaaa;
position: absolute;
right: 5px;
top: 0px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<button id="promo" type="button" class="promo">
<span class="promoCode">Promo Code +</span>
</button>
<input type="hidden" id="promo-value-copy" value="test">
<!-- Promo Modal -->
<div id="promoModal" class="modal">
<div class="modal-content">
<span class="promoClose">×</span>
<input type="text" class="promo-value" id="promo-value" value="" placeholder="Promotional code" onchange="updatePromo()">
</div>
</div>
我去掉了造型,去拿肉和土豆。
如何使用JavaScript将actual value=“test”更新为新值?
4条答案
按热度按时间taor4pac1#
innerHTML用于更改HTML内容,例如,您可以使用它来更改段落
<p id="text-to-change"></p>
的内容。要更改输入value
,您可以使用对象的.value
属性。尝试将下面的行
copyPromo.innerHTML = promoValue.value;
更改为copyPromo.value = promoValue.value;
vc9ivgsu2#
解决方案(也是由最初的提问者选择的)被埋在@Barmar的评论中:
如果要更改DOM中的值,请使用
input1.setAttribute("value", newValue)
vohkndzv3#
您需要像这样更改值:
字符串
ddrv8njm4#
因此,按照Barmar的建议,我能够更新我的updatePromo函数,以生成值并更新DOM值。
这里是更新的功能。我希望它能帮助社区。
字符串
我不得不离开其他元素,因为它在表单字段后添加文本,这实际上是这个项目所需要的,但通常不需要。