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

Tips for utilizing jquery.load for fetching a section of an html document or an entire html file

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

Struggling to create responsive embedded videos?

Modifying the color of an empty string is not feasible in Javascript

Storing a temporary value within an ng-repeat iteration in AngularJS

"Obtaining Data from Local Storage on a Different Page: A Step-by-

Ways to ascertain if a view has completed rendering in JavaScript

Is there a way to obtain cookies on a Server-side component in the latest version of Next.js?

Show the form for user input

How does the single-threaded nature of Node.js handle an abundance of concurrent requests?

Error: The function nodemailer.createTransport is not defined or does not exist

What are some ways I can customize the appearance of this Google Maps infoWindow?

Using brackets in a CSS background-image URL will cause it to malfunction and not display the

Using Handlebars.js to conditionally display data within an object is not functioning as expected

Creating a JavaScript function to automatically hide a dropdown menu after a specific duration

Warning: Attention Required for Published NPM Package Fix

What are the best methods for looping through ids in MongoDB and executing actions on them?

Identify the activation of the "Inspect Element" feature

Utilizing the active tab feature within CSS

Steps to animate a div expanding to fit its content dimensions