選択タグの値から箇条書きのリストを印刷するには

innerHTMLを使用してhtmlページへの印刷を練習しています。私は箇条書きのリストを使用してid printHereの段落に印刷するselectタグから値を取得しようとしています。これまでのところ、私は価値を得ることができますが、そこからどこに行くのかは分かりません。選択タグの値から箇条書きのリストを印刷するには

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

そして、私のスクリプト

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

出典

2017-04-08 MusicGirl

innerHtmlを使用し、HTML要素である 'x'を渡しています。 'innerText'とは異なり、 'innerHTML'はプレーンテキストやエスケープされたHTMLとして渡す文字列を実際のHTMLとして扱い、HTMLとして扱うように設定しません。そのため、コンソールに表示される値の代わりに '[object HTMLSelectElement]'が表示されます。これは、console.log（）が単に 'x'ではなく 'x.value'を呼び出すためです。

'document.getElementById（ "fruitSelect"）'は、要素の '値'だけでなく、ページのDOMの要素である '[オブジェクトHTMLSelectElement]'を返します。この要素は、console.log（x.value）呼び出しで見られるように、プロパティの1つが 'value'です。

私の提案は、あなたの<p>タグ<ul>タグ行い、その後、あなたがしようとしているよう弾丸ポイントのリストを構築するために、内の選択された要素の「値」で<li>タグを追加することです。

以下の例では、元の「印刷」機能を比較のために残して2つのパターンを追加し、同封の<p>タグを<ul>タグに変更しました。例を実行し、3つの関数の違いを調べると、そのアイデアが得られるはずです。

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

出典

2017-04-08 22:15:27 dylansweb

「setAsList」関数との差「addToListは（）」「.innerHTML」、すなわち、一方では『=』が使用されるの設定に使用される唯一の演算子でありますinnerHTMLを設定し、もう一方では、 '+ ='を使用して既存のinnerHTMLを追加します。 – dylansweb

：

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

これは新しい<li>要素を作成するたびに[選択]ボタンをクリックし、ドロップダウンフィールドの値をに追加します印刷を追加する前にを入力してください<ul>には<li>を付けてください。

出典

2017-04-08 22:12:24 stuartmccoll

非常にうまく動作します。あなたが所望の出力を取得]ボタンをクリックした後

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

：あなたはこれを試すことができます。

出典

2017-04-08 22:38:14

選択タグの値から箇条書きのリストを印刷するには

答えて

関連する問題