changing the text content of both h1 and a span that are on the same line-CodePudding

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.

CodePudding user response：

I'd put the variable text into its own element, to allow for quick toggling of it when needed.

<h1 id="speedlab">
  <span >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.

CodePudding user response：

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>