Update or change text within elements in a div using JavaScript and DOM-CodePudding

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 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. Now I have checked to make sure that they are actually there using a completely separate div in another location and they pop up there fine. I call them and display them using the same method and they work fine, as follows:

document.getElementById("output5").innerHTML = yourMonth;

Anybody know what's going on because I'm quite confused? Is there an alternate method you could recommend for displaying these variables that is better?

CodePudding user response：

You are using innerHTML to put pure text in a span tag. Should work, but perhaps try innerText instead.

document.getElementById("output5").innerText = yourMonth;

(as mentioned before in the comments, its good to provide more context in your original question)

CodePudding user response：

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>