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

Undoubtedly this is javascript 101, but why doesn't myArray print to innerHTML or console.log? I want a user to input something, and then for it to appear in the id="item" div. What am I doing wrong?

毫无疑问这是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);

4 个解决方案

#1

Just add an onclick event on the add button. so the script knows when to do run the function. Because at the moment the script won't get called so it wont submit anything because it doesn't call up anything and wont run anything.

只需在添加按钮上添加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>

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

#3

You want to create the function. And trigger the function on every clicking

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

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

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

JS fiddle

#4

use this code :

使用此代码:

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

#1