Pourquoi la modification de la valeur d'entrée de mon formulaire n'apparaît-elle pas en Javascript?

Question

Je suis en train d'écrire un script qui calcule le coût de l'ordre des bières d'un client. Il y a un menu choisi d'options de bière générées dynamiquement que le client doit choisir, qui comprend le nom de l'article et son prix. L'utilisateur sélectionne sa quantité et clique sur le bouton "Ajouter un article". Lorsque vous cliquez sur ce bouton, le nom et le prix de l'article doivent être ajoutés à la première entrée disponible dans la colonne "Description de l'article".

Le problème est que les modifications de l'entrée "descriptionInput0" n'apparaissent pas. Lorsque je connecte la variable "firstAvailable" à la console, les modifications apparaissent ici, mais pas dans le navigateur. Je ne suis pas vraiment sûr de ce qui se passe. Des idées? Merci pour votre temps. Il s'agit d'un jsFiddle et du code.

window.onload = calculator(); 
 
    
 
    function calculator() { 
 
    
 
     var descriptions = new Array("Shamrock Ale", "Lucky Pilsner", "Irish Wheat", "Irish Malt", "Shamrock Rye"); 
 
    
 
     var prices = new Array(24.99, 27.99, 27.99, 32.99, 35.99); 
 
    
 
     populateSelectMenu(descriptions, prices); 
 
    
 
     var descriptionMenu = document.getElementById("descriptionMenu"); 
 
    
 
     addButton = document.getElementById("addItem"); 
 
     addButton.onclick = function() { 
 
    
 
      firstAvailable = detectAvailable(); 
 
    
 
      firstAvailable = document.getElementsByName("descriptionInput" + firstAvailable); 
 
      console.log(firstAvailable); 
 
      firstAvailable.value = descriptionMenu.options[descriptionMenu.selectedIndex].text; 
 
     } 
 
    
 
    } 
 
    
 
    function populateSelectMenu(descriptions, prices) { 
 
    
 
     var descriptionMenu = document.getElementById("descriptionMenu"); 
 
    
 
     for (var i = 0; i < descriptions.length; i++) { 
 
      option = document.createElement("option"); 
 
      option.value = i; 
 
      option.innerHTML = descriptions[i] + ": $" + prices[i]; 
 
      descriptionMenu.appendChild(option); 
 
     } 
 
    
 
    } 
 
    
 
    function detectAvailable() { 
 
    
 
     var descriptionInputs = document.querySelectorAll("input[name^='descriptionInput']"); 
 
    
 
     inputs: for (var i = 0; i < descriptionInputs.length; i++) { 
 
    
 
      if (descriptionInputs[i].value != '') { 
 
       continue inputs; 
 
      } else { 
 
       var firstAvailable = i; 
 
       break inputs; 
 
      } 
 
    
 
     } 
 
    
 
     return firstAvailable; 
 
    }

<form name="calculator" id="calculator"> 
 
     <div id="userInput"> 
 
      <select name="descriptionSelect" id="descriptionMenu"></select> 
 
      <label>Quantity</label> 
 
      <input type="number" name="quantity" min="1" max="10" size="2" value="1"> 
 
      <input type="button" value="Add to List" id="addItem"> 
 
     </div> 
 
     <table align="center" cellspacing="1" cellpadding="5" width="40%" border="1"> 
 
      <thead> 
 
       <tr> 
 
        <th>Item Description</th> 
 
        <th>Unit Price</th> 
 
        <th>Quantity</th> 
 
        <th>Price</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td> 
 
         <input type="text" name="descriptionInput0" value="" size="30"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="uPriceInput0" value="" size="5"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="quantityInput0" value="" size="5"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="tPriceInput0" value="" size="5"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <input type="text" name="descriptionInput1" value="" size="30"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="uPriceInput1" value="" size="5"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="quantityInput1" value="" size="5"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="tPriceInput1" value="" size="5"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <input type="text" name="descriptionInput2" value="" size="30"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="uPriceInput2" value="" size="5"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="quantityInput2" value="" size="5"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="tPriceInput2" value="" size="5"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <input type="text" name="descriptionInput3" value="" size="30"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="uPriceInput3" value="" size="5"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="quantityInput3" value="" size="5"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="tPriceInput3" value="" size="5"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <input type="text" name="descriptionInput4" value="" size="30"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="uPriceInput4" value="" size="5"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="quantityInput4" value="" size="5"> 
 
        </td> 
 
        <td> 
 
         <input type="text" name="tPriceInput4" value="" size="5"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="3" align="right">Total Price:</td> 
 
        <td> 
 
         <input type="text" name="totalPrice" size="5" disabled> 
 
        </td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </form>

Answer 1

firstAvailable[0].value = descriptionMenu.options[descriptionMenu.selectedIndex].text; 

firstAvailable est NodeList[1] un tableau de sorte que vous devez spécifier l'index pour obtenir NodeElement.

Juste une suggestion.

function detectAvailable() { 
    var descriptionInputs = document.querySelectorAll("input[name^='descriptionInput']"); 
    for (var i = 0; i < descriptionInputs.length; i++) { 
     if (descriptionInputs[i].value == '') { 
      return descriptionInputs[i]; 
     } 
    } 
} 

Et

addButton.onclick = function() { 
    var firstAvailable = detectAvailable(); 
    firstAvailable.value = descriptionMenu.options[descriptionMenu.selectedIndex].text; 
}