CODEWITHSUNDEEP
javascripthtml
Luca
Luca

Reputation: 55

using textContent to change/ add writing in my html file

I'm struggling to work out what I'm doing wrong and why what I have done is not working.. if someone could provide the correct code and explanation that would be great.

Basically, I need that when the button is clicked and name filled out, an extra line appears that says "well done you have finished task 1" but I can't get it to happen and have tried multiple ways.it needs to be where the is in the HTML file.

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;

Upvotes: 0

Views: 229

Answers (2)

Shinjo
Shinjo

Reputation: 695

First, you need to fix the typos. Then you need to call the function: writeNewMessage();

Note that you can remove var newMessage = document.getElementById("clickme"); since it wasn't doing anything.

function promptName() {

  var sName = prompt("Enter your name.\nThis prompt should show up 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 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!!";
  writeNewMessage(); // < need to be called
}

function writeNewMessage() {
  // var newMessage = document.getElementById("clickme"); // < useless
  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>

Upvotes: 1

Jonathan Rys
Jonathan Rys

Reputation: 1886

Well writeNewMessage wasn't being called anywhere, so not sure what that's doing but all the rest seems to work:

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>

Upvotes: 1

Related Questions