我已經查看了大量文章,所有解決方案都只更新視覺顯示的值,而不是輸入標簽本身的實際值。
當我單擊一個按鈕時,會出現一個帶有文本輸入的模式以輸入代碼。我們稱之為 input1
輸入代碼并退出模式后,按鈕會更新為輸入的代碼,并且隱藏的輸入值也會更新。然而,實際的標簽 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>
我去掉了造型去吃肉和土豆。
How can I update the actual value="test" to the new value using javascript?
uj5u.com熱心網友回復:
innerHTML 用于更改 HTML 內容,例如,您可以使用它來更改段落的內容<p id="text-to-change"></p>。要更改輸入value,您可以使用.value物件的屬性。
嘗試更改以下copyPromo.innerHTML = promoValue.value;行copyPromo.value = promoValue.value;
uj5u.com熱心網友回復:
您需要像這樣更改值:
document.getElementById("promo-value-copy").value = promoValue.value;
uj5u.com熱心網友回復:
因此,按照 Barmar 的建議,我能夠更新我的 updatePromo 函式以生成值以及更新 DOM 值。
這是更新的功能。我希望它對社區有所幫助。
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;
copyPromo.setAttribute("value", promoValue.value); // suggestion given by Barmar
}
謝謝Stackoverflowers!
我不得不留下另一個元素,因為它在表單欄位之后添加了該專案實際需要的文本,但通常不需要。
感謝那些做出貢獻的人。
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/422166.html
標籤:
