Question

＆＃13;

var x = window.innerWidth;
if (window.innerWidth<500){
function myFunction() {
    var node = document.getElementById("myList2").firstChild;
    document.getElementById("myList1").appendChild(node);
}}
var myVar = setInterval(myFunction, 1000);    

document.getElementById("test").innerHTML = x;

＆＃13;

<html>
<body>

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p id="test"></p>

</body>
</html>

＆＃13;

我的宽度是1366px，但上面的代码执行并将li添加到myList1。任何帮助将不胜感激。可能是一个新手问题，但我是编码的新手。

Answer 1

您应该在函数中移动条件：

＆＃13;

var x = window.innerWidth;
function myFunction() {
    if ( x < 500 ) {
        var node = document.getElementById("myList2").firstChild;
        document.getElementById("myList1").appendChild(node);
    }
}
var myVar = setInterval(myFunction, 1000);    
document.getElementById("test").innerHTML = x;

＆＃13;

<html>
<body>

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p id="test"></p>

</body>
</html>

＆＃13;

Answer 2

你也可以在调用之前检查：

＆＃13;

var x = window.innerWidth;

function myFunction() {
    var node = document.getElementById("myList2").firstChild;
    document.getElementById("myList1").appendChild(node);
    
  
}

if (window.innerWidth < 500) {
    var myVar = setInterval(myFunction, 1000);
}


document.getElementById("test").innerHTML = x;

＆＃13;

<html>

<body>

  <ul id="myList1">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
  <ul id="myList2">
    <li>Water</li>
    <li>Milk</li>
  </ul>
  <p id="test"></p>

</body>

</html>

＆＃13;

在这种情况下，

setInterval不是理想的解决方案，因为它将继续调用函数，直到没有var node，然后每次调用函数时都会出错。

Javascript innerWidth无法正常工作

2 个答案: