Instructions for connecting a button and an input field

Question

Instructions for connecting a button and an input field

How can I connect a button to an input field? My goal is to make it so that when the button is clicked, the content of the text field is added to an array (displayed below)

const userTags = [];
function addTags(event) {
   userTags.push(event.target.__ what should I use here to retrieve the input data? __)
}

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

Once more, I am attempting to establish a connection between the button and the input field so that clicking the button will capture the input field data and append it to the 'userTag' array using the addTags() function.

javascript html css forms form-submit

Answer 1

Answer №1

To access the label in your callback function, utilize the event target by using

const parent = e.target.closest('label')

. Then, employ querySelector() to retrieve the input element nested under this label tag with

const input = parent.querySelector('input')

. Next, store the input's value in a variable like const inputValue = input.value, and proceed to add this value to your array.

Your callback function should be placed within an event listener for click events.

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

function getValue(e) {
  const parent = e.target.closest('label')
  const input = parent.querySelector('input')
  const inputValue = input.value
  if (inputValue !== "") {
    userTags.push(inputValue)
  }
  console.log(userTags)
}

btn.addEventListener('click', getValue)

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

Answer 2

To access the label in your callback function, utilize the event target by using

const parent = e.target.closest('label')

. Then, employ querySelector() to retrieve the input element nested under this label tag with

const input = parent.querySelector('input')

. Next, store the input's value in a variable like const inputValue = input.value, and proceed to add this value to your array.

Your callback function should be placed within an event listener for click events.

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

function getValue(e) {
  const parent = e.target.closest('label')
  const input = parent.querySelector('input')
  const inputValue = input.value
  if (inputValue !== "") {
    userTags.push(inputValue)
  }
  console.log(userTags)
}

btn.addEventListener('click', getValue)

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

Answer 3

Answer №2

let valueArray = []
function storeValue(){
let data = document.getElementById("input").value
valueArray.push(data)
document.getElementById("Output").innerHTML = valueArray
}

<body>
<input type="text" id="input">
<button onclick="storeValue()">Save</button>
<div id="Output"></div>
</body>

Access the element using document.getElementById and retrieve its value

document.getElementById("Enter ID Here").value

Answer 4

let valueArray = []
function storeValue(){
let data = document.getElementById("input").value
valueArray.push(data)
document.getElementById("Output").innerHTML = valueArray
}

<body>
<input type="text" id="input">
<button onclick="storeValue()">Save</button>
<div id="Output"></div>
</body>

Access the element using document.getElementById and retrieve its value

document.getElementById("Enter ID Here").value

Instructions for connecting a button and an input field

Answer №1

Answer №2

Similar questions

Eliminating Non-Breaking Spaces with the Click of a Button

What is the best way to retrieve the [id]/routeName in Next.js?

Protection of Angular expressions

What is the best way to empty input, select, and textarea fields after performing a clone operation

How to dynamically modify a list box with JavaScript

What could be causing the <img src= ' '/> tag to malfunction in Express?

The MAC slideshow circles at the bottom have been mysteriously chopped off

Responsive Bootstrap tables nested within responsive tabs

I am experiencing issues with staying logged in while using Passport and sessions. The function "isAuthenticated()" from Passport continuously returns false, causing me to not remain logged in

Make sure to validate for null values when extracting data using the useSelector hook

Ways to streamline a form containing several duplicate rows and make it more user-friendly

The changes made to $scope in AngularJS are not being displayed in the view

Pass data to child component in react

The filter functionality is not functioning properly in AngularJS

How to ensure scrollbar adjusts to increasing height when using scroll:auto?

Check the row in a JQuery table by using the .on("click") function to determine if a hyperlink within the row was clicked or if

What is the importance of utilizing clearInterval to restart the timer in ReactJS?

Unable to transmit props through components with Vue router

How to vertically align an image within a div that has a variable height

How can I move a TableItem from one material UI component to another using drag-and-drop?