[英]Why the input value wont update ? when i click the send button?
我嘗試運行它第一次工作的代碼，但在第二次它不會工作我不知道為什么？ 我想以一種我可以一遍又一遍地發送多條消息的方式做到這一點
var message = document.querySelector('.container'); var btn = document.getElementById('btn'); var inpt = document.getElementById('txt'); function AddMessage() { if (String(inpt.value) != '' && isNaN(inpt.value) == true) { message.innerHTML += `<p>${inpt.value} </p>`; inpt.value = ''; } }
input { outline: none; }
<div class="container"> <input type="text" value="" id="txt"> <button id="btn" onclick="AddMessage()">send</button> <p>whats your name ?</p> </div>
由於您的輸出元素是所有其他元素的包裝器，因此當您這樣做時，您將覆蓋所有這些元素：
message.innerHTML += `<p>${inpt.value} </p>`;
在視覺上（甚至可能直觀地）這沒有明顯的效果。 但它所做的是創建不再對應於您的btn和inpt變量的全新元素。 這使您與不代表屏幕上任何內容的陳舊對象進行交互。
可能最簡單的方法是創建一個更具體的輸出元素。 例如，在容器中添加另一個<div>並輸出：
var message = document.getElementById('message'); // reference new element var btn = document.getElementById('btn'); var inpt = document.getElementById('txt'); function AddMessage() { if (String(inpt.value) != '' && isNaN(inpt.value) == true) { message.innerHTML += `<p>${inpt.value} </p>`; inpt.value = ''; } }
input { outline: none; }
<div class="container"> <input type="text" value="" id="txt"> <button id="btn" onclick="AddMessage()">send</button> <p>whats your name ?</p> <div id="message"></div> <!-- new element --> </div>
這一行message.innerHTML += ...
等於message.innerHTML = message.innerHTML + ... ，它為message.innerHTML分配了一些新的東西，換句話說，它重寫了內容，因此btn and inpt的引用丟失了，原件被覆蓋了。
var message = document.querySelector('.container'); var btn = document.getElementById('btn'); var inpt = document.getElementById('txt'); var output = document.getElementById('output'); function AddMessage() { console.log('addMessage') if (String(inpt.value) != '' && isNaN(inpt.value) == true) { output.innerText=inpt.value; inpt.value = '' } }
input { outline: none; }
<div class="container"> <input type="text" value="" id="txt" placeholder="write your message here"> <button id="btn" onclick="AddMessage()">send</button> <p>whats your name ?</p> <p id="output"></p> </div>
.innerHTML的問題您正在分配給.innerHTML 。 這會重新創建元素的后代（請參閱innerHTML "On setting..." ）：
const oldReference = document.getElementById("element"); document.body.innerHTML += ""; // Assigning to innerHTML const newReference = document.getElementById("element"); const isSameElement = oldReference === newReference; console.log({ isSameElement });
<div id="element">
如您所見，舊的引用btn和inpt不會是當前在 DOM 中的元素。
旁注：解析.innerHTML可能非常耗時，並且將其與用戶輸入一起使用是一個安全問題。
特別是對於用戶輸入，您不應該使用.innerHTML ，因為這是一種將腳本插入網頁的簡單方法：
document.body.addEventListener("click", evt => { if (!evt.target.closest("button")) return; const input = document.querySelector("input"); document.body.innerHTML += input.value; });
pre{padding:2px 4px;border:1px solid;width:min-content}
<input><button>Insert</button> <p>Try to input this:</p> <pre><code><img src="" onerror="console.log('any script here!')"></code></pre> <p>Then look into your browser console.
.innerHTML的替代品如果要添加元素，可以使用document.createElement() 、Element.append()和Node.textContent ：
const input = document.querySelector("input"); document.querySelector("button").addEventListener("click", evt => { const p = document.createElement("p"); p.textContent = input.value; document.body.append(p); input.value = ""; const currentInput = document.querySelector("input"); console.log("Is same input?", input === currentInput); });
<input><button>Insert</button> <p>Also try adding some HTML, for example: <code><span>Test</span>
您只能更新內部 html 以獲取答案，而不是帶有輸入的完整塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> input{ outline: none; } </style> <div class="container"> <input type="text" value="" id="txt"> <button id="btn" onclick="AddMessage()">send</button> <p>whats your name ?</p> <p id="answer"></p> </div> <script> var message = document.querySelector('.container'); var btn = document.getElementById('btn'); var inpt = document.getElementById('txt'); var answer = document.getElementById('answer'); function AddMessage(){ if( String(inpt.value) != '' && isNaN(inpt.value) == true ) { answer.innerHTML = `<p>${inpt.value} </p>`; inpt.value = ''; } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> input{ outline: none; } </style> <div class="container"> <input type="text" value="" id="txt" name="txt"> <button id="btn" onclick="AddMessage()">send</button> <p>whats your name ?</p> <ul id="list"> </ul> </div> <script> var message = document.querySelector('.container'); var btn = document.getElementById('btn'); var inpt = document.getElementById('txt'); var list = document.getElementById('list'); let myList = ""; function AddMessage(){ if( String(inpt.value) !== '' && isNaN(inpt.value) == true ) { myList +=`<li>${inpt.value}</li>`; list.innerHTML = myList; } } </script> </body> </html>
當我點擊按鈕編輯我的值時，狀態不會更新輸入值
[英]When I click on button to edit my value, the state don't update the input value
當我使用按鈕單擊事件檢索時，為什么我的輸入值等於 ''？
[英]Why is my input value equal '' when I retrieved with a button click event?
我不知道為什么當單擊此按鈕時，它不會將表單發送到Google工作表
[英]I can't figure out why when this button is clicked it wont send the form to google sheets
當我使用輸入type = button時，它的值不會發送到服務器
[英]When I use input type=button the value of it is not send to the server
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.