Can't replace the text in an HTML paragraph with javascript

Question

I'm trying to write a simple webpage where the text in one paragraph is replaced by one of two possible paragraphs depending on which button was clicked. Nothing happens when I click either button. I've tried moving the code around, but that doesn't seem to work. Here is the whole document, edited to keep unnecessary details out

 var mypar = document.getElementById("default"); document.getElementById("one").onclick = "Story1()" document.getElementById("two").onclick = "Story2()" function Story1(){ mypar.innerHTML = "long paragraph"; } function Story2(){ mypar.innerHTML = "long paragraph"; }

 body { background-color: blue; }.button{ border-radius: 8px; display: inline-block; text-align: center; background-color: #4CAF50; padding: 15px 32px; font-size: 32px; } h1 { text-align: center; color: yellow; text-decoration: underline; text-shadow: 2px 2px; } p { padding-right: 50px; padding-left:250px; text-align: justify; color: white; font-style: italic; font-weight: bold; }

 <h1> <img src="people.jpg" alt= "onetwo" > <br> <button class="button" id = "one"> one </button> <button class="button" id = "two"> two</button> <br> Heading </h1> <p id = "p1"> long paragraph.</p> <p id ="default"> </p> <p id = "end"> written here </p>

Answer 1

Don't specify event handlers as strings. Use the function itself:

document.getElementById("one").onclick = Story1;

Or better yet:

document.getElementById("one").addEventListener("click", Story1);

Updated snippet:

 var mypar = document.getElementById("default"); document.getElementById("one").addEventListener("click", Story1); document.getElementById("two").addEventListener("click", Story2); function Story1(){ mypar.innerHTML = "long paragraph 1"; } function Story2(){ mypar.innerHTML = "long paragraph 2"; }

 body { background-color: blue; }.button{ border-radius: 8px; display: inline-block; text-align: center; background-color: #4CAF50; padding: 15px 32px; font-size: 32px; } h1 { text-align: center; color: yellow; text-decoration: underline; text-shadow: 2px 2px; } p { padding-right: 50px; padding-left:250px; text-align: justify; color: white; font-style: italic; font-weight: bold; }

 <h1> <img src="people.jpg" alt= "onetwo" > <br> <button class="button" id = "one"> one </button> <button class="button" id = "two"> two</button> <br> Heading </h1> <p id = "p1"> long paragraph.</p> <p id ="default"> </p> <p id = "end"> written here </p>

Answer 2

Found two problems here -

• First one looks like a typo, why the definition of both the functions is similar?
• The second one is, you are putting your functions in string. If you want to call them you have to put them out of quotes.

Just for the sake of making the definitions of both the functions different, I am putting the innerHTML to be replaced in the Story2 function as - "short paragraph", instead of "long paragraph".

    var mypar = document.getElementById("default");

    document.getElementById("one").onclick = Story1;

    document.getElementById("two").onclick = Story2;

    function Story1 () {
      mypar.innerHTML = "long paragraph";
    }

    function Story2 () {
      mypar.innerHTML = "short paragraph";
    }

Answer 3

Just change the html:

 <button id="one" onclick="Story1()"> one</button>

And remove the.onclick from your JAVASCRIPT.

EASY.

Answer 4

Try using DOM 's EventListener see the code below:

 var mypar = document.getElementById("default"); document.getElementById("one").addEventListener('click', ()=>{ mypar.innerHTML = "long paragraph one"; }) document.getElementById("two").addEventListener('click', ()=>{ mypar.innerHTML = "long paragraph two"; })

 body { background-color: blue; }.button{ border-radius: 8px; display: inline-block; text-align: center; background-color: #4CAF50; padding: 15px 32px; font-size: 32px; } h1 { text-align: center; color: yellow; text-decoration: underline; text-shadow: 2px 2px; } p { padding-right: 50px; padding-left:250px; text-align: justify; color: white; font-style: italic; font-weight: bold; }

 <h1> <img src="people.jpg" alt= "onetwo" > <br> <button class="button" id = "one"> one </button> <button class="button" id = "two"> two</button> <br> Heading </h1> <p id = "p1"> long paragraph.</p> <p id ="default"> </p> <p id = "end"> written here </p>

Answer 5

try to see this exmple it can help to tigger click event:

// Function to change the content of t2
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// Add event listener to table
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);