Tengo una página web que actúa como entrada para un dispositivo integrado y cambio de modo durante la operación. Tengo la siguiente línea h1.
<h1 id="speedlab">Speed: <span id="speedText">0</span>%</h1>y lo actualizo en un modo usando: -
var output = document.getElementById("speedText"); vslidertmp = (100 -(Math.abs(vslidertmp-100)/2)); vslidertmp = (vslidertmp.toFixed(0)); glslider.value = vslidertmp; output.innerHTML = (vslidertmp - 100) ;cuando cambio de modo, quiero actualizar la línea h1 para cambiar el texto del encabezado a "Recortar:" y el contenido del texto rápido al valor de Recortar. Supongo que actualizar el texto rápido es lo mismo, pero ¿cómo actualizo el texto del encabezado de Speed: a Trim: y dejo intacto el elemento span? No puedo resolver la sintaxis para esto.
Pondría el texto variable en su propio elemento, para permitir un cambio rápido cuando sea necesario.
<h1 id="speedlab"> <span class="mode">Speed</span>: <span id="speedText">0</span>% </h1>Y para cambiarlo
document.querySelector('.mode').textContent = 'Trim';Si bien también podría reemplazar el contenido del nodo de texto, sin cambiar el marcado HTML...
document.querySelector('#speedlab').childNodes[0].textContent = 'Trim: ';Darle al modo su propio elemento es mejor.
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>