How to make button change paragraph more than once and in last one change both paragraph and button text?

user_17819149 0
Viewed 68

I really need help with my research project: How to add more paragraphs to change on the click of the button like "Third Paragraph" and "Forth Paragraph" and in the last click the (Forth Paragraph) I want to change the paragraph and button text together, the paragraph to another text and the button from (click) to (Hint)?

var time = 0;

function changeText(txt) {
    var txt = (time === 0) ? "First Paragraph" : "Second Paragraph";
    document.getElementById('name').innerHTML = txt;
    time++;
}
<body>
    <p>
        <b id='name'>{description}</b>.
    </p>

    <input type='button' onclick='changeText()' value="click" />
    <br /><br />
</body>

game-development html javascript
2 Answers

this snippet may help you

let time = 0;
const paragraphs = ["First", "Second", "Third", "Fourth"];

function changeText() {
  let text = `${paragraphs[time]} Paragraph`;
  if (text === "Fourth Paragraph") {
    document.getElementById('name').innerHTML = "another text";
    document.getElementById('btn').value = "Hint"
  } else {
    document.getElementById('name').innerHTML = text;
  }
  if (paragraphs[time + 1]) {
    time++;
  }
}
<p><b id='name'>{description}</b>.</p>
<input type='button' onclick='changeText()' value="click" id="btn" />
<br /><br />

user_175602900

JS

    var index = 0;
    var arr = ["First Paragraph","Second Paragraph","Third Paragraph","Forth Paragraph"];
    function changeText(element){  
    
    if(index < arr.length){
        document.getElementById('name').innerHTML = arr[index];
    }else{
    element.style.display = "none";
    }
       index++;
    }

HTML

    <body>
    <p> <b id='name'>{description}</b>.
      </p>
     
      <input type='button' onclick='changeText(this)' value="click"/>
     <br /><br />
    </body>

You can use arr and index value to set text or button hide

Try This

user_171890110
Related