How to replace content within <p> tags with new variables from javascript
Question
I have some code set up that I want to act like a vertically scrolling text wall. It is a wall of p tags that javascript is identifying each tag via its id, line#, and reassigning the content of the tag with the tag below it through variables named row#, essentially making the text scroll up. I had an input button to activate all the functions at once.
My problem is that all the text will scroll once, but not again. Something is happening to prevent it from copying and replacing a second time.
I originally thought perhaps after it had scrolled once, I needed to reset all of the variables and start again. I tried doing that, but it either didn't work or I wasn't going about it correctly.
let row0 = document.getElementById('line0').innerHTML; let row1 = document.getElementById('line1').innerHTML; let row2 = document.getElementById('line2').innerHTML; let row3 = document.getElementById('line3').innerHTML; let row4 = document.getElementById('line4').innerHTML; function returnInput() { let testValue = document.getElementById('userInput').value; let testWrite = document.getElementById('line15'); testWrite.innerHTML = '> ' + testValue } function textScroll0() { let str = document.getElementById("line0").innerHTML; let res = str.replace(row0, row1); document.getElementById("line0").innerHTML = res; } function textScroll1() { let str = document.getElementById("line1").innerHTML; let res = str.replace(row1, row2); document.getElementById("line1").innerHTML = res; } function textScroll2() { let str = document.getElementById("line2").innerHTML; let res = str.replace(row2, row3); document.getElementById("line2").innerHTML = res; } function textScroll3() { let str = document.getElementById("line3").innerHTML; let res = str.replace(row3, row4); document.getElementById("line3").innerHTML = res; } function textScroll4() { let str = document.getElementById("line4").innerHTML; let res = str.replace(row3, row4); document.getElementById("line4").innerHTML = res; }
<input type="submit" value="Enter" onclick="returnInput(); textScroll0(); textScroll1(); textScroll2(); textScroll3(); textScroll4()"/> <p id="line0"> 0</p> <p id="line1"> 1</p> <p id="line2"> 2</p> <p id="line3"> 3</p> <p id="line4"> 4</p>
here the content of each line is > # in my trials:
0 would become > 1, 1 would become > 2, 2 would become > 3, ect. it worked perfectly. and then on the second button press, there seemed to be no change. No errors in the log. It was running the code but the code had failed somewhere.
I know its not pretty and probably not the best solution but i want to know what i did wrong please and thank you.
1 answers
solution1
0 ACCPTED 2018-12-28 14:19:12
The reason why your code is not working after the third click is because you're not reassigning the row variables.
Your code is a kinda redundant so i created a function that has a similar idea of what you are trying to do.
<html>
<input type="button" value="Scroll UP" onclick="scrollUp()">
<div id="div">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<script>
var div = document.getElementById("div");
function scrollUp() {
for(var i = 0; i < div.children.length - 1; i++) {
div.children[i].innerHTML = div.children[i + 1].innerHTML;
}
div.children[div.children.length -1].innerHTML = "";
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.