为什么 myArray 不打印到 innerHTML 或 console.log？

Question

毫无疑问，这是javascript 101，但为什么myArray 不打印到innerHTML 或console.log？我希望用户输入一些东西，然后让它出现在 id="item" div 中。我做错了什么？

<div id="item">X</div>
<input id="task"><button id="add">Add</button>

var task = document.getElementById('task').value;
myArray = [];
myArray.push(task);

document.getElementById('item').innerHTML = myArray;

console.log(myArray);

Answer 1

只需在 add 按钮上添加一个 onclick 事件。所以脚本知道什么时候执行运行函数。因为目前脚本不会被调用，所以它不会提交任何东西，因为它不会调用任何东西，也不会运行任何东西。

Javascript fiddle

  document.getElementById('add').addEventListener('click', function() {
    
    var task = document.getElementById('task').value;
    myArray = [];
    myArray.push(task);
    
    document.getElementById('item').innerHTML = myArray;
    });

<div id="item">X</div>
<input id="task"><button id="add">Add</button>

Jquery fiddle

 $('#add').on('click', function(){
      var task = document.getElementById('task').value;
      myArray = [];
      myArray.push(task);
    
      document.getElementById('item').innerHTML = myArray;
    
      console.log(myArray);
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<div id="item">X</div>
<input id="task"><button id="add">Add</button>

Answer 2

var button = document.getElementById('add');
myArray = [];

button.addEventListener('click', function() {
  
  myArray.push(document.getElementById('task').value);
  document.getElementById('item').innerHTML = myArray;
  console.log(myArray);
  
}, false);

<div id="item">X</div>
<input id="task"><button id="add">Add</button>

Answer 3

您想创建函数。并在每次点击时触发该功能

<div id="item">X</div>
<input id="task"><button id="add" onclick="add()">Add</button>

Js

var myArray = [];
add =function ()
{
 var task = document.getElementById('task').value;
 myArray.push(task);
 alert(myArray);
}

JS fiddle

Answer 4

使用此代码：

<html>
<body>
<div id="item">X</div>
<input type="text" id="task"><button id="add" onclick="addText()">Add</button>
<script>
    var myArray =[];
    function addText() {
        var task = document.getElementById('task').value;
        myArray.push(task);
        document.getElementById('item').innerHTML = myArray;
        console.log(myArray);      
    }
</script>

</body>
</html>

为什么 myArray 不打印到 innerHTML 或 console.log？

Why doesn't myArray print to innerHTML or console.log?

javascript

innerhtml

console.log