<p>
<label>First Name (no "for" attribute):</label>
<input id="first" type="text" value="Jane" />
</p>
<p>
<label for="last">Last Name (w/ "for" attribute):</label>
<input id="last" type="text" value="Doe" />
</p>
<p id="result">
<strong id="result-label">Full Name:</strong>
<output for="first last" aria-labelledby="result-label" id="output"></output>
</p>
label[for='paragraph'] {
color: rebbeccapurple;
}
#result {
text-align: center;
}
#result-label {
font-size: 16pt;
}
#result-label,
#output {
display: block;
}
const firstNameEl = document.getElementById('first');
const lastNameEl = document.getElementById('last');
const outputEl = document.getElementById('output');
function updateOutput() {
const value = `${firstNameEl.value} ${lastNameEl.value}`;
outputEl.innerText = value;
}
updateOutput();
firstNameEl.addEventListener('input', updateOutput);
lastNameEl.addEventListener('input', updateOutput);