How to get the innerHTML of an input in Java script

Question

I am making a TODO list. I have difficulties with setting the input text on my card. Everything I write in the input, I want to select and to put on the card.

I tried to select the innerHTML of an input when I type something in. I don't know how to select the typed input text. I would then create a new element with the text inside, and would append it to the card.

let btn = document.querySelector('.add');
let textspace = document.querySelector('.todotext');

const input = document.querySelector('input');

// eventlistner by button clicked

btn.addEventListener('click', function() {
  var txt = document.getElementsByClassName('input').innerHTML;
});

<div class="card">
  <div class="todoheader">TODO List</div>
  <div class="todotext"></div>
  <ul class="list"></ul>
  <div class="addtodo">
    <buton class="add" type="button"> + </buton>
    <input type="text" class="input" placeholder="add todo" />
  </div>
</div>

Assign the unique id to your input field and use document.getElementById('uniqueID').value instead document.getElementsByClassName() — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Nov 8, 2022 at 10:51

Rory McCrossan · Accepted Answer · 2022-11-08 10:47:00Z

To get the value of the input use the value property, not innerHTML. Also note that you already have a reference to the input Element in the input variable, so you don't need to use getElementsByClassName() to retrieve it - not least of all because the syntax there is flawed.

Once you have the text you can use createElement() to add a new p element to the .todotext container:

const btn = document.querySelector('.add');
const textspace = document.querySelector('.todotext');
const input = document.querySelector('input');

btn.addEventListener('click', function() {
  const txt = input.value;  
  if (!txt)
    return;
  
  const p = document.createElement('p');
  p.textContent = txt;
  textspace.appendChild(p);
  input.value = '';
});

<div class="card">
  <div class="todoheader">TODO List</div>
  <div class="todotext"></div>
  <ul class="list"></ul>
  <div class="addtodo">
    <button class="add" type="button"> + </button>
    <input type="text" class="input" placeholder="add todo" />
  </div>
</div>

Jason Tran · Accepted Answer · 2022-11-08 10:55:13Z

1

As others already answered your question. I just wanted to point out that there is a misspelling in your code (buton instead of button). Fix that and the button element would be rendered correctly.

answered Nov 8, 2022 at 10:55

Jason Tran

111 bronze badge

Comments

Mina · Accepted Answer · 2022-11-08 10:48:25Z

First, getElementsByClassName will return HTMLCollection which is array-like, you need to use querySelector instead, also the innerHTML, textContent, innerText properties all are empty string for the input because the input is a self-closing tag without content inside, you need to use value property.

let btn = document.querySelector('.add');
let textspace = document.querySelector('.todotext');
const input = document.querySelector('input');

// eventlistner by button clicked

btn.addEventListener('click', function() {
  var txt = input.value;
  console.log(txt)
});

<div class="card">
  <div class="todoheader">TODO List</div>
  <div class="todotext"></div>
  <ul class="list"></ul>
  <div class="addtodo">
    <buton class="add" type="button"> + </buton>
    <input type="text" class="input" placeholder="add todo" />
  </div>
</div>

Shahed · Accepted Answer · 2022-11-08 10:48:01Z

0

btn.addEventListener('click', function() {
  var txt = document.getElementByClassName('input').value;
});

You were using getElementByClassName which will be HTMLCollection.To loop over each element you need to convert it into an array loop over them.

answered Nov 8, 2022 at 10:48

Shahed

2,1007 silver badges24 bronze badges

Comments

Riccardo Zonta · Accepted Answer · 2023-01-09 15:06:33Z

0

var txt = document.getElementsByClassName('input').value;

You should get the value of an input , not the innerHTML

Also assign a unique id to you input fields and select them with it, it's much better :)

edited Jan 9, 2023 at 15:06

answered Nov 8, 2022 at 10:44

Riccardo Zonta

2773 silver badges4 bronze badges

Collectives™ on Stack Overflow

How to get the innerHTML of an input in Java script

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related