CODEWITHSUNDEEP
javascripthtmlcssformsform-submit
crosenberg8
crosenberg8

Reputation: 19

How to link a button and input field

How do I link a button to an input field? I am trying to create something so that when I click on the button, it will add what was in the text field, to an array (shown below)

const userTags = [];
function addTags(event) {
   userTags.push(event.target.__ what do I even put here to get the input data? __)
}

<label>
   Tags: <input type="text" name="todoTags"/> <button>Create new tag</button>
</label>

Again, I am trying to link up the button so that when I click it, it will grab the data from the input field, and add that data to the 'userTag' array with the addTags() function.

Upvotes: 0

Views: 5227

Answers (2)

dale landry
dale landry

Reputation: 8610

You can use the event target within your callback function to get the label using const parent = e.target.closest('label'), then use querySelector() to get the input element that is grouped under that label tag using const input = parent.querySelector('input') then set a variable to that value like const inputValue = input.value, then push the value into your array.

Your callback function is placed into an event listener for click.

const btn = document.querySelector('.btn')
const userTags = []

function getValue(e) {
  // get the label by traversing up the DOM tree to the closest label element
  const parent = e.target.closest('label')
  // get the input that lives inside the label element using querySelector
  const input = parent.querySelector('input')
  // get the inputs value and assign to variable
  const inputValue = input.value
  // only push values that are not empty
  if (inputValue !== "") {
    userTags.push(inputValue)
  }
  console.log(userTags)
}

//event listener for click on btn element
btn.addEventListener('click', getValue)
<label>
   Tags: <input type="text" name="todoTags"/> <button class="btn">Create new tag</button>
</label>

Upvotes: 1

Tamir Polyakov
Tamir Polyakov

Reputation: 164

let valueArray = []
function getValue(){
let value = document.getElementById("input").value
valueArray.push(value)
document.getElementById("Messages").innerHTML = valueArray
}
<body>
<input type="text" id="input">
<button onclick="getValue()">Click</button>
<div id="Messages"></div>
</body>

Get the element with document.getElementById and then take its value

document.getElementById("Put Id In Here").value

Upvotes: 0

Related Questions