简体   繁体   English

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

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

Undoubtedly this is javascript 101, but why doesn't myArray print to innerHTML or console.log? 毫无疑问,这是javascript 101,但是为什么myArray不打印到innerHTML或console.log? I want a user to input something, and then for it to appear in the id="item" div. 我希望用户输入一些内容,然后使其出现在id =“ item” div中。 What am I doing wrong? 我究竟做错了什么?

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

Just add an onclick event on the add button. 只需在add按钮上添加一个onclick事件。 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. 因为此刻脚本不会被调用,所以它不会提交任何内容,因为它不会调用任何内容并且不会运行任何内容。

Javascript fiddle Javascript 小提琴

  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 jQuery的 小提琴

  $('#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> 

 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> 

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>

Js s

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

JS fiddle JS小提琴

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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM