Question

我设置了一些代码，想要像垂直滚动的文本墙一样工作。 javascript是一堆p标签，它通过其ID，行号标识每个标签，并通过名为row＃的变量将标签内容及其下方的标签重新分配，从而使文本向上滚动。我有一个输入按钮可以立即激活所有功能。

我的问题是所有文本将滚动一次，但不会再次滚动。正在发生某种情况，以防止它再次复制和替换。

我最初以为也许在滚动一次之后，我需要重置所有变量并重新开始。我尝试这样做，但是它要么无效，要么我没有正确处理。

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>

这里每一行的内容是>＃在我的试验中：

0将变为> 1， 1将变为> 2， 2将变成> 3，等等。它工作得很好。然后按第二个按钮，似乎没有任何变化。日志中没有错误。它正在运行代码，但是代码在某处失败。

我知道它不是很好，可能不是最好的解决方案，但是我想知道我做错了什么，谢谢。

Answer 1

第三次单击后代码不起作用的原因是，您没有重新分配行变量。

您的代码有点多余，所以我创建了一个函数，该函数对您要执行的操作具有类似的想法。

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

如何用javascript中的新变量替换<p>标记中的内容

1 个答案: