<html> <head> <title>Example 1</title> </head> <body> <input type="text" id="item"> <br> <input type="button" value="add item" onclick="addItem()"> <br> <div id="output"></div> <script> var html = ''; var output = document.getElementById('output'); var number = 0; function addItem(){ var shoppingList = []; var item = document.getElementById('item').value; shoppingList.push(item); html = (number = (number + 1)) + '. ' + shoppingList + '<br>'; output.innerHTML = output.innerHTML + html; } </script> </body> </html> Cuando agrego x , y , z a shoppingList en el primer ejemplo anterior, recibo:
que es eso, lo que quiero recibir.
Cuando var item se vuelve global en el siguiente segundo ejemplo:
<script> var html = ''; var output = document.getElementById('output'); var item = document.getElementById('item').value; var number = 0; function addItem(){ var shoppingList = []; shoppingList.push(item); html = (number = (number + 1)) + '. ' + shoppingList + '<br>'; output.innerHTML = output.innerHTML + html; } </script>Recibo:
1. 2. 3.
Entonces, cuando muevo .value de var item a shoppingList.push(item) en el tercer ejemplo a continuación:
<script> var html = ''; var output = document.getElementById('output'); var item = document.getElementById('item'); var number = 0; function addItem(){ var shoppingList = []; shoppingList.push(item.value); html = (number = (number + 1)) + '. ' + shoppingList + '<br>'; output.innerHTML = output.innerHTML + html; } </script>Recibo:
¿Podrían ustedes explicarme por qué tengo que mover .value de var item a shoppingList.push(item) , si quiero recibir el resultado del tercer ejemplo (1. x 2. y 3. z), si var item es global, por favor?