Comment imprimer une liste à puces à partir des valeurs d'une balise de sélection

Je pratique l'impression sur la page HTML en utilisant innerHTML. J'essaie d'obtenir les valeurs des balises de sélection à imprimer dans le paragraphe avec l'ID printHere en utilisant une liste à puces. Jusqu'à présent, je peux obtenir la valeur, mais je ne sais pas où aller à partir de là.Comment imprimer une liste à puces à partir des valeurs d'une balise de sélection

Mon html

<!DOCTYPE html> 
<html> 
<head><title></title><meta charset="UTF-8"></head> 
<body> 
<h3> Pick your fruit to print it to the menu below</h3> 
<select id="fruitSelect"> 
    <option value = "banana" >banana</option> 
    <option value = "strawberry">strawberry</option> 
    <option value = "apple">apple</option> 
</select> 
<p id="printHere"></p> 
<button type="button" onclick = "print()">Select</button> 
</body> 
</html>

Et mon script

<script> 
function print(){ 
    var x = document.getElementById("fruitSelect"); 
    console.log(x.value);//test to see if it works 
    document.getElementById("printHere").innerHTML=x; 
} 
</script>

Source

2017-04-08 MusicGirl

Vous utilisez innerHtml et en passant 'x' qui est un élément HTML. Contrairement à 'innerText', 'innerHTML' ne définira pas la chaîne que vous lui transmettez en texte brut, ou HTML échappé, mais en HTML réel, à traiter en HTML. C'est pourquoi vous obtenez: '[object HTMLSelectElement]' au lieu de la valeur que vous voyez imprimée sur la console - parce que dans votre console.log() vous appelez 'x.value', plutôt que simplement 'x'. Votre 'document.getElementById ("fruitSelect")' retourne un '[objet HTMLSelectElement]' qui est un élément dans le DOM de votre page, pas simplement la 'valeur' de l'élément. Cet élément a des propriétés, dont l'une est 'value', comme le montre votre appel à console.log (x.value).

Ma suggestion serait de faire votre balise <p> un tag <ul>, puis ajoutez <li> balises à la « valeur » d'un élément sélectionné à l'intérieur, afin de construire la liste de puce que vous cherchez à faire. Dans l'exemple ci-dessous, j'ai laissé la fonction d'impression d'origine en place pour la comparaison, j'ai ajouté deux variantes et j'ai remplacé la balise <p> qui l'accompagne par une balise <ul>. Exécutez l'exemple, examinez la différence entre les trois fonctions, et vous devriez avoir l'idée.

<html> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
</head> 
<body> 
    <h3> Pick your fruit to print it to the menu below</h3> 
    <select id="fruitSelect"> 
     <option value="banana">banana</option> 
     <option value="strawberry">strawberry</option> 
     <option value="apple">apple</option> 
    </select> 
    <ul id="printHere"> 

    </ul> 
    <button type="button" onclick="print()">What you had</button> 
    <button type="button" onclick="setAsList()">Set as selection</button> 
    <button type="button" onclick="addToList()">Add to selection</button> 
    <script> 

     function print() { 
      var x = document.getElementById("fruitSelect"); 
      console.log(x.value);//test to see if it works 
      document.getElementById("printHere").innerHTML = x; 

     } 

     function setAsList(){ 
      var x = document.getElementById("fruitSelect"); 
      console.log(x.value);//test to see if it works 
      document.getElementById("printHere").innerHTML = "<li>" + x.value + "</li>"; 
     } 

     function addToList() { 
      var x = document.getElementById("fruitSelect"); 
      console.log(x.value);//test to see if it works 
      document.getElementById("printHere").innerHTML += "<li>" + x.value + "</li>"; 
     } 

    </script> 

</body> 
</html>

Source

2017-04-08 22:15:27 dylansweb

La différence entre la fonction « setAsList » et le « addToList() » est que l'opérateur utilise le réglage de la « .innerHTML », qui est, d'une part « = » est utilisé pour définir innerHTML, et d'autre part, '+ =' est utilisé pour ajouter à l'innerHTML existant. – dylansweb

Je crois que ce qui suit répond à vos exigences:

<html> 
    <head> 
     <title></title> 
     <meta charset="UTF-8"> 
    </head> 
    <body> 
     <h3> Pick your fruit to print it to the menu below</h3> 
     <select id="fruitSelect"> 
      <option value = "banana" >banana</option> 
      <option value = "strawberry">strawberry</option> 
      <option value = "apple">apple</option> 
     </select> 
     <ul id="printHere"> 
     </ul> 
     <button type="button" onclick = "print()">Select</button> 
    </body> 
</html> 

<script> 
function print() { 
    var x = document.getElementById("fruitSelect"); 
    var node = document.createElement("li"); 
    var textNode = document.createTextNode(x.value); 
    node.appendChild(textNode); 
    document.getElementById("printHere").appendChild(node); 
} 
</script>

Cela crée un nouvel élément <li> chaque fois que le 'Select' le bouton est cliqué et ajoute la valeur du champ de liste déroulante au <li> avant d'ajouter le printHere <ul> avec ce <li>.

Source

2017-04-08 22:12:24 stuartmccoll

Cela fonctionne très bien. Vous pouvez essayer ceci:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 
\t <h3>Pick your fruit to print it to the menu below</h3> 
 
\t <select id="fruitSelect"> 
 
\t \t <option value="banana" >banana</option> 
 
\t \t <option value="strawberry">strawberry</option> 
 
\t \t <option value="apple">apple</option> 
 
\t </select> 
 
\t <p id="printHere"></p> 
 
\t <button type="button" onclick="print()">Select</button> 
 
\t <script> 
 
\t function print(){ 
 
\t  var option = document.getElementById('fruitSelect').querySelectorAll('option'), 
 
\t  \t list = document.createElement("ul"), 
 
\t  \t listItem; 
 
\t \t \t 
 
\t \t for(var i = 0, len = option.length; i < len; i++){ 
 
\t \t \t listItem = document.createElement("li"); 
 
\t \t \t listItem.innerHTML = option[i].innerHTML; 
 
\t \t \t list.appendChild(listItem); 
 
\t \t } 
 
\t  document.getElementById("printHere").innerHTML = list.innerHTML; 
 
\t } 
 
</script> 
 
</body> 
 
</html>

Après avoir cliqué sur le bouton, vous obtenez la sortie désirée.

Source

2017-04-08 22:38:14

Comment imprimer une liste à puces à partir des valeurs d'une balise de sélection

Répondre

Questions connexes