2016-06-01 7 views
0

Несомненно это javascript 101, но почему myArray не печатает на innerHTML или console.log? Я хочу, чтобы пользователь что-то вводил, а затем, чтобы он появился в id = "item" div. Что я делаю не так?Почему myArray не печатает на innerHTML или console.log?

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

вы пытались инициализировать массив? var myArray = []; И можете ли вы установить innerHTML с массивом? Это кажется немного странным, если это не myArray [0]? – JRsz

+2

Потому что вам нужно запустить код ПОСЛЕ того, как пользователь изменит значение на входе. – epascarello

+0

работает для меня ... https://jsfiddle.net/nzhc3gcc/ где работает javascript? – Rhumborl

ответ

0

Просто добавьте onclick событие на кнопку add. поэтому скрипт знает, когда нужно запустить функцию. Потому что в настоящий момент сценарий не будет вызван, поэтому он не будет ничего представлять, потому что он ничего не вызывает и ничего не будет запускать.

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>

0

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>

0

Вы хотите создать функцию. И вызвать функцию на каждом щелкать

<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

0

использовать этот код:

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