javascript - 使用 textContent 更改/添加我的 html 文件中的文字

Question

我正在努力找出我做错了什么以及为什么我所做的不起作用......如果有人可以提供正确的代码和解释那就太好了。

基本上，我需要当单击按钮并填写姓名时，会出现一条额外的行，上面写着“干得好，您已经完成了任务 1”，但我无法让它发生，并且尝试了多种方法。它需要位于 HTML 文件中的位置。

HTML

    <h1> Input and Output using Javascript</h1>
    <p id="message"> THis is some text in a paragraph </p>

    <p><span id="newmessage"></span></p>
    <p><button type="button" id="clickme">Click Me!</button></p>

JavaScript

    function promptName() {

    var sName = prompt("Enter your name.\nThis prompt should show uo when 
    the\nClick Me busson is clicked.","your Name");

    alert(" Hi there " + sName +". Alert boxes are a quick way to check the 
    state\n of your variabled when you are developing code.");

    rewriteParagraph(sName);
    }

    function rewriteParagraph(userName){
    var message = document.getElementById("message");

    message.innerHTML = "hi " + userName + "If you can see this you have 
    successfully overwritten the contents of this paragraph. 
    Congratulations!!";
    }

    function writeNewMessage(){

    var newMessage = document.getElementById("clickme");
    document.getElementById("newmessage").innerHTML = "you have now 
    finished Task 1";}

   function init() {
   var clickMe = document.getElementById("clickme");
   clickMe.onclick = promptName;


  }

   window.onload = init;

Answer 1

好吧，writeNewMessage 没有在任何地方被调用，所以不确定它在做什么，但其余的似乎都有效:

function promptName() {
    var sName = prompt("Enter your name.\nThis prompt should show when the\nClick Me button is clicked.","your name");

    alert("Hi there " + sName +". Alert boxes are a quick way to check the state\n of your variables when you are developing code.");

    rewriteParagraph(sName);
    writeNewMessage();
}

function rewriteParagraph(userName) {
    var message = document.getElementById("message");

    message.innerHTML = "Hi " + userName + ". If you can see this you have successfully overwritten the contents of this paragraph. Congratulations!!";
}

function writeNewMessage() {    
    document.getElementById("newmessage").innerHTML = "you have now finished Task 1";
}

function init() {
    var clickMe = document.getElementById("clickme");
    clickMe.onclick = promptName;
}

window.onload = init;

<h1> Input and Output using Javascript</h1>
<p id="message"> This is some text in a paragraph </p>

<p><span id="newmessage"></span></p>
<p><button type="button" id="clickme">Click Me!</button></p>