JavaScriptが追加された要素テキストが表示されない

ユーザーのためにオンラインでリストを作成しようとしています。タスクを入力して[JotIT]ボタンをクリックすると、タスクが追加されるように機能します。JavaScriptが追加された要素テキストが表示されない

これまでのところ、機能を追加することはできますが、検査しても何らかの理由でテキストが表示されない場合は、テキストがHTMLに表示されます。

<script> 
    var welcome = 'Welcome To JotIT'; 

    var jotItem = function() 
     { 
      //Create & Get the necessary elements 
      var item = document.createElement('input'), 
      space = document.createElement('br'), 
      form = document.getElementById("listing"), 
      frag = document.createDocumentFragment(), 
      textVal = document.getElementById("input-jot"); 

      //Set Attributes to list item 
      item.setAttribute('type', 'checkbox'); 
      item.setAttribute('name', 'jot-list'); 

      //If there is no input in the textbox then create an alert popup 
      if(textVal.value === "") 
       alert("Please insert a value"); 
      else { 
       item.innerHTML = textVal.value; 
       frag.appendChild(item); 
       frag.appendChild(space); 
       form.appendChild(frag); 
       textVal.value = ""; 
      } 
     } 
</script> 

</head> 
    <body> 
    <h1 id="head">JotIT</h1><br> 
    <p> <script type="text/javascript">document.write(welcome);</script></p> 
    <input type="form" id= "input-jot"> 
    <button class = 'btn-info' id="jot-down" onclick=jotItem();>JotIt!</button> 
    <!-- TODO: Add form submit tag instead of ul tag --> 
    <!-- TODO: Align the list items --> 
    <form id = "listing" method="get"> 
     <input type="checkbox" name="me"> Start </input> 

    </form> 

    </body>

出典

2016-05-24 Anonymous

JavaScriptに「frag」に内容があるとは思われません。 'item.innerHTML = textVal.value'を使うと' frag.innerHTML'を意味しますか？ – Quantastical

私は葉自体が内容を持っていなければならないことは知らなかった。私はfragに追加する要素にコンテンツを追加しました。あれは正しいですか？ –

ラベルを挿入する必要があります。入力は、自己終了/空要素でなければなりません。特にタイプチェックボックスの入力は、ラベルを正しく表示しません。代わりに、この目的のためにlabel要素を使用してください。

var welcome = 'Welcome To JotIT'; 
 

 
    var jotItem = function() { 
 
     //Create & Get the necessary elements 
 
     var item = document.createElement('input'), 
 
     label = document.createElement('label'), 
 
     space = document.createElement('br'), 
 
     form = document.getElementById("listing"), 
 
     frag = document.createDocumentFragment(), 
 
     textVal = document.getElementById("input-jot"); 
 

 
     //Set Attributes to list item 
 
     item.setAttribute('type', 'checkbox'); 
 
     item.setAttribute('name', 'jot-list'); 
 

 
     //If there is no input in the textbox then create an alert popup 
 
     if (textVal.value === "") 
 
     alert("Please insert a value"); 
 
     else { 
 
     label.innerText = textVal.value; 
 
     frag.appendChild(label); // here goes the label 
 
     frag.appendChild(item); 
 
     frag.appendChild(space); 
 
     form.appendChild(frag); 
 
     textVal.value = ""; 
 
     } 
 
    }

</head> 
 

 
<body> 
 
    <h1 id="head">JotIT</h1> 
 
    <br> 
 

 
    <input type="form" id="input-jot"> 
 
    <button class='btn-info' id="jot-down" onclick=jotItem();>JotIt!</button> 
 
    <!-- TODO: Add form submit tag instead of ul tag --> 
 
    <!-- TODO: Align the list items --> 
 
    <form id="listing" method="get"> 
 
    <label>Start</label> 
 
    <input type="checkbox" name="me" /> 
 

 
    </form> 
 

 
</body>

出典

2016-05-24 19:03:25 lipp

うわー、私はそれを逃した。どうもありがとう。しかし、問題は、テキストがチェックボックスの前に現れることです。正しく調整するにはどうすればいいですか？ –

は、あなたが何を期待しているかに依存します...とにかく、これはおそらく新しい質問でしょう。 – lipp

ラベルとチェックボックスを逆にする場合は、 'item'を' label'の前に付け加えます。スタックに追加することを考えてください。 –

これは、あなたが間違って入力にラベルを追加しているという事実に関係しています。以下のHTML構文を使用して問題を解決してください：

<label><input type="checkbox" name="jot-list" />The Text</label>

出典

2016-05-24 19:06:37

JavaScriptが追加された要素テキストが表示されない

答えて

関連する問題