I want to input data to a div (column headed ‘Result’) from an input (columnd headed ‘Edit/Update’) field using a button (named ‘Update’) to trigger the event. I can grab the data from the input field and I can identify which button is clicked. I can’t seem to combine the 2 functions to get the data transferred from the input to the output div.
the form with the fields in question
This is my JS code:
// select the parent element
const formGroup = document.getElementById('table');
// select input field
const addData = document.getElementById('input');
// select output field
const output = document.getElementById('output');
// identify which button is clicked
const buttonClicked = (e) => {
const isButton = e.target.nodeName === 'BUTTON';
if (!isButton) {
return;
}
console.log(e.target.id);
};
formGroup.addEventListener('click', buttonClicked);
// Get data from input and display to output element
addData.addEventListener('submit', (e) => {
e.preventDefault();
const data = addData.res.value.trim();
if (data.length) {
document.getElementById('output').innerHTML = data;
addData.reset();
}
// console.log(data);
});
**This is my HTML:**
<div id="table">
<div id="title" class="row">
<div>
<div class="header">Round #</div>
</div>
<div>
<div class="header">Date</div>
</div>
<div>
<div class="header">Versus</div>
</div>
<div>
<div class="header">Ground</div>
</div>
<div>
<div class="header">Result</div>
</div>
<div>
<div class="header">Edit/Update</div>
</div>
</div>
<div id="line1" class="row">
<div>
<div class="header">1.</div>
</div>
<div>
<div class="header">17/08/2024</div>
</div>
<div>
<div class="header">Ipswich</div>
</div>
<div>
<div class="header">Portman Road</div>
</div>
<div>
<div id="output" class="header"></div>
</div>
<div class="form-group">
<input
id="input"
class="data"
placeholder="Enter/Edit Result"
name="res"
/>
<button id="button-1" class="btn btn-success" type="button">
Update
</button>
</div>
</div>
<div id="line2" class="row">
<div>
<div class="header">2.</div>
</div>
<div>
<div class="header">25/08/2024</div>
</div>
<div>
<div class="header">Brentford</div>
</div>
<div>
<div class="header">Anfield</div>
</div>
<div>
<div id="output" class="header"></div>
</div>
<div class="form-group">
<input
id="input"
class="data"
placeholder="Enter/Edit Result"
name="res"
/>
<button id="button-2" class="btn btn-success" type="button">
Update
</button>
</div>
</div>
</div>
</div>