無法通過 DOM 更改 javascript 中的段落文本

Question

它改變了大約一秒鍾並返回到前一個文本。“正在加載...”行必須更改為“嗨，請單擊下一個文本框以查看更多說明！”。

我已經嘗試過最新的 chrome 和 Edge 瀏覽器。

 function greetMe() { var yourName = document.getElementById("textbox").value; info1 = "hi, Please click the next text box to see more instructions!" document.getElementById("textToChange").innerHTML = info1 }

 #myForm { float: left; width: 30% } #myformInfo { }

 <!DOCTYPE html> <html> <head> </head> <body> <h1>HEllO ThERE!</h1> <div id="myForm"><form > <input id="textbox" placeholder="Your name"> <button onclick="greetMe()">click!</button> <br><br> <input id=""> </div></form> <div id="myFormSteps"> <p id="textToChange"> <script>var info1 = "Loading..." document.write(info1) </script> </p> </div> </body> </html>

Answer 1

這可能是因為您還沒有為按鈕設置 type 屬性。 按鈕的默認類型是提交。 嘗試將屬性 type="button" 添加到您的 <button>。

Answer 2

當您單擊按鈕時，您的表單正在提交並且頁面正在重新加載 - 這就是它返回其初始狀態的原因。 要阻止這種情況發生，將event作為參數傳遞給函數，然后在函數中使用preventDefault() ：

HTML

<button onclick="greetMe(event);">click!</button>

JS

function greetMe(e) {
  e.preventDefault();
  // ...
}

順便說一句，最好是刪除您的內聯 JS 並改用事件偵聽器。

var button = document.querySelector('button');
button.addEventListener('click', greetMe, false);

無法通過 DOM 更改 javascript 中的段落文本

問題描述

2 個解決方案

解決方案1
0 2016-05-06 18:09:19

解決方案2
0 2016-05-06 18:41:20

無法通過 DOM 更改 javascript 中的段落文本

問題描述

2 個解決方案

解決方案1 0 2016-05-06 18:09:19

解決方案2 0 2016-05-06 18:41:20

解決方案1
0 2016-05-06 18:09:19

解決方案2
0 2016-05-06 18:41:20