Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Killeon Patterson
Killeon Patterson
18,528 Points
Posted by Killeon Patterson
Killeon Patterson
18,528 Points

Multiple input evaluation

I'm attempting to add the value entered into the input fields to my array. There are two input fields and I'd like each of them to be evaluated independently of each other. Do I need to make another variable selector for each input? 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
   <input class='input'>
    <input class='input'>
    <button>
      add button
    </button>

    <ol>


    </ol>

    <script src="app.js"></script>
  </body>
</html>

JS ```

let keyWord = document.querySelectorAll('input'); const buttonButton = document.getElementsByTagName('button')[0];

buttonButton.addEventListener('click', () => {

  let ul = document.getElementsByTagName('ol')[0];
  let li = document.createElement('li');
  li.textContent = keyWord.value;
   let pract = keyWord.value;
   equals.unshift(pract);

 ul.appendChild(li);
 keyWord.value = '';

});

const equals = [ 'jay ', ' baby']; document.write(equals);

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

You can access your inputs by subscripting the collection.

You assign keyword to be the collection of all "input" elements using querySelectorAll. So to be able to use the value attribute, you need to use a subscript on the collection anyway. The subscript you use will identify which input you are accessing.

  something = keyWord[0].value;  // the first input
  otherthing = keyWord[1].value; // the second input

FYI: you also have a reference to something named "equals", but that name is undefined.