Retrieve value on button-click

Question

This is my code and I want to get value of myText. I tried with appendChild but it doesn't work. How can I get myText value when I click on button?

<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
    <li>Coffe</li>
    <li>Tea</li>
  </ul>
  <script type="text/javascript">
    function myFunc() {
      var = document.getElementById("myText").value;
      document.getElementById("myList").appendChild();
    }
  </script>
</div>`

At the beginning I would recommend you type your query at Google. Read documentation about Element, Node objects. Such question might be resolved with your involvement and help of Google. — Jakub Chlebowicz
– Jakub Chlebowicz, Commented Apr 22, 2017 at 15:20
@ User which cast "close" vote, how is the present Question "off-topic" for stackoverflow.com? — guest271314
– guest271314, Commented Apr 22, 2017 at 15:35

guest271314 · Accepted Answer · 2017-04-22 15:20:46Z

There should be an identifier following var, before = to identify the variable.

Create an <li> element using document.createElement(), set .textContent to variable identifier from previous line.

Pass created li element to .appendChild().

favorite
<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
    <li>Coffe</li>
    <li>Tea</li>
  </ul>
  <script type="text/javascript">
    function myFunc() {
      var text = document.getElementById("myText").value;
      var li = document.createElement("li");
      li.textContent = text;
      document.getElementById("myList").appendChild(li);
    }
  </script>
</div>`

Nina Scholz · Accepted Answer · 2017-04-22 15:25:50Z

For a plain text node, you could create one with document.createTextNode(text) and use it directly. Nevertheless you need still a node for the list element, which you can then append to the unordered list node.

function myFunc() {
    var text = document.getElementById("myText").value,
        li = document.createElement('li');
      
    li.appendChild(document.createTextNode(text));
    document.getElementById("myList").appendChild(li);
}

<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
    <li>Coffe</li>
    <li>Tea</li>
  </ul>
</div>

Just wondering if li.appendChild(document.createTextNode(text)); is better than li.textContent = text; after creating li element? Wouldn't latter be more efficient?
i am using a more node centric view to the DOM, actually i have not tested, which works faster.

Eduard Moraru · Accepted Answer · 2017-04-22 15:25:56Z

You need to store the value of the input into a variable.

Then, you need to create a new List Item DOM node to which you set the value from the variable.

Finally, you need to add the newly created list item Node to your list Node.

<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
      <li>Coffe</li>
      <li>Tea</li>
  </ul>
  <script type="text/javascript">
      function myFunc() {
        var value = document.getElementById("myText").value;
        var newItem = document.createElement('li');
        newItem.appendChild(document.createTextNode(value));
        
        var list = document.getElementById("myList");
        list.appendChild(newItem);
      }
  </script>
</div>`

snorkpete · Accepted Answer · 2017-04-23 04:10:38Z

0

Try updating your function to this:

function myFunc() {
  var myText= document.getElementById("myText").value;
  document.getElementById("myList").innerHTML+="<li>"+myText+"</li>";
}

edited Apr 23, 2017 at 4:10

snorkpete

14.6k3 gold badges43 silver badges57 bronze badges

answered Apr 22, 2017 at 16:45

M Rajesh

213 bronze badges

Collectives™ on Stack Overflow

Retrieve value on button-click

4 Answers 4

Comments

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Related