I have a web page acting as input to an imbedded device and I change modes during operation. I have the following h1 line.
<h1 id="speedlab">Speed: <span id="speedText">0</span>%</h1>
and I update it in one mode using :-
var output = document.getElementById("speedText");
vslidertmp = (100 -(Math.abs(vslidertmp-100)/2));
vslidertmp = (vslidertmp.toFixed(0));
glslider.value = vslidertmp;
output.innerHTML = (vslidertmp - 100) ;
when I change modes, I want to update the h1 line to change the header text to "Trim:" and the speedtext content to the value of Trim . I assume updating the speedtext is the same but how do I update the header text from Speed: to Trim: and leave the span element intact. I can't work out the syntax for this.
I'd put the variable text into its own element, to allow for quick toggling of it when needed.
<h1 id="speedlab">
<span class="mode">Speed</span>: <span id="speedText">0</span>%
</h1>
And to change it
document.querySelector('.mode').textContent = 'Trim';
While you could replace the contents of the text node as well, without changing the HTML markup...
document.querySelector('#speedlab').childNodes[0].textContent = 'Trim: ';
Giving the mode its own element is nicer.
HTML:
header {
display: flex;
align - items: center;
/* Remove the next line if you want the span to appear next to the h1 */
justify - content: space - between;
border - bottom: 1 px solid #000;
padding: 10px 30px;
}header {
border - bottom: 1 px solid #000; }
header > h1 { display: inline-block; }
header span { margin-left: 100px; }<header>
<h1>Text</h1>
<span>text2</span>
</header>