如何替换里面的内容<p>带有来自 javascript 的新变量的标签
[英]How to replace content within <p> tags with new variables from javascript
问题描述
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.这是一堵 p 标签，javascript 通过其 id、line# 识别每个标签，并通过名为 row# 的变量重新分配标签内容及其下方的标签，实质上是使文本向上滚动。 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.
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 个解决方案
解决方案1
0 已采纳 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.