Okay, so on my webpage I am trying to update the text within a div contained within these span elements.
<div class="output-1-2-1-1">
<p id="yourNameDisplay">Person</p>
</div>
<div class="output-1-2-1-2">
<p>Born in <span id="yourMonthDisplay">February</span></p>
</div>
My current method of doing this is as follows. Input is registered from textboxes using these statements in a function after a button is clicked. I have checked and the id "yourMonth" does match the input box, so that's not the issue.
var yourMonth = document.getElementById("yourMonth").value;
And then the variable is then displayed by calling the element ID in the same function below.
document.getElementById("yourMonthDisplay").innerHTML = yourMonth;
But for some reason, the variables aren't showing up in the text after the button is clicked. I have checked to make sure that they are there using a completely separate div in another location and they pop up there fine. I called them and displayed them using the same method and they work fine, as follows:
document.getElementById("output5").innerHTML = yourMonth;
Is there an alternate method you could recommend for displaying these variables that is better?
your event is triggert after click on the button? if yes, then you get the value from the input field. can you catch the value from the input field? if yes then you can put the new value inside the span tag with the selector yourMonthDisplay and not output5. you have the wrong selector.
and the code will work.
function swapMonth() {
let yourMonth = document.getElementById("yourMonth").value;
document.getElementById("yourMonthDisplay").innerHTML = yourMonth;
}<input id="yourMonth">
<button onclick="swapMonth(this)">swap</button>
<div class="output-1-2-1-1">
<p id="yourNameDisplay">Person</p>
</div>
<div class="output-1-2-1-2">
<p>Born in <span id="yourMonthDisplay">February</span></p>
</div>