No puedo conseguir que funcione. Quiero que el usuario elija entre dos opciones (botones de radio). La primera opción solo debe mostrar un campo de entrada con la etiqueta Texto de "Höhe". La segunda opción debe cambiar la etiqueta Texto de la primera entrada a "Niedrigste Höhe en mm" y mostrar el segundo campo de entrada.
Tal vez alguien pueda dedicar unos minutos y ayudarme, gracias.
Aquí está mi código, pero no funcionará.
function adjustableHeightCheck() { if (document.getElementById("adjustableHeight").checked) { document.getElementById("max-height").style.display = "block"; document.getElementById("height").innerHTML = "Niedrigste Höhe in mm"; } else { document.getElementById("max-height").style.display = "none"; } } <label>Fix Höhe <input type="radio" name="verlegeart"> </label> <label>Verstellbare Höhe <input type="radio" name="verlegeart" id="adjustableHeight"> </label> <br> <label> <p id="height">Höhe</p> <input type="number"> </label> <div id="max-height" style="display: none"> <label> <p>Höchste Höhe in mm</p> <input type="number"> </label> </div>Simplemente agregue el controlador de eventos onclick para hacer las cosas:
<label>Fix Höhe <input type="radio" name="verlegeart" onclick="adjustableHeightCheck()"> </label> <label>Verstellbare Höhe <input type="radio" name="verlegeart" id="adjustableHeight" onclick="adjustableHeightCheck()"> </label>Necesita un detector de eventos para eso porque la función no se llama solo por declaración. Podrías hacerlo en línea con:
<input type="radio" name="verlegeart" id="adjustableHeight" onclick="adjustableHeightCheck()">Pero esta no es una buena práctica: HTML, CSS y JavaScript deben estar separados:
const adjustableHeight = document.querySelector('#adjustableHeight'); adjustableHeight.addEventListener('change', adjustableHeightCheck); También olvidó volver a cambiar la label en la instrucción else :
document.getElementById("height").innerHTML = "Höhe";Ejemplo de trabajo: ( CSS también separado ;)
const fixHeight = document.querySelector('#fixHeight'); const adjustableHeight = document.querySelector('#adjustableHeight'); fixHeight.addEventListener('change', adjustableHeightCheck); adjustableHeight.addEventListener('change', adjustableHeightCheck); function adjustableHeightCheck() { if (document.getElementById("adjustableHeight").checked) { document.getElementById("max-height").style.display = "block"; document.getElementById("height").innerHTML = "Niedrigste Höhe in mm"; } else { document.getElementById("max-height").style.display = "none"; document.getElementById("height").innerHTML = "Höhe"; } } #max-height { display: none; } <label>Fix Höhe <input type="radio" name="verlegeart" id="fixHeight"> </label> <label>Verstellbare Höhe <input type="radio" name="verlegeart" id="adjustableHeight"> </label> <br> <label> <p id="height">Höhe</p> <input type="number"> </label> <div id="max-height"> <label> <p>Höchste Höhe in mm</p> <input type="number"> </label> </div>