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>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 />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