Por qué esto no funciona. El tamaño, peso, color no cambia. Creé una etiqueta y una entrada de rango para cambiar su tamaño, peso y color.
html
<label class="main" id="word">Sample input</label> <label for="text">Text: </label> <input type="text" name="text" id="data" placeholder="Type your word"><br> <label for="s">Size: </label> <input type="range" name="s" id="size" from="10" to="50"><br> <label class="we"for="w">Weight: </label> <input type="range" name="w" id="weight"><br> <label for="c">Color: </label> <input type="color" name="c" id="color">JavaScript
var text = document.getElementById('word'); var data = document.getElementById('data').value; var size = document.getElementById('size').value; var weight = document.getElementById('weight').value; var color = document.getElementById('color').value; text.style.color = color; text.style.fontWeight = weight; text.style.fontSize = size;He realizado algunos pasos para que su código funcione:
Paso 1: Traiga todo su código a una función changeStyle() y colóquelo en onchange="changeStyle()" en toda la etiqueta <input> . Y ejecuto changeStyle() en la página de inicio también para que configure sus datos de muestra según los datos actuales de HTML.
Paso 2: repare el rango .style.fontSize estableciendo el valor en size + 'px' .
Paso 3: repare los atributos HTML from="10" to="50" a min="10" max="50" . Puede obtener más información aquí .
function changeStyle() { var text = document.getElementById('word'); var data = document.getElementById('data').value; var size = document.getElementById('size').value; var weight = document.getElementById('weight').value; var color = document.getElementById('color').value; text.innerHTML = data; text.style.color = color; text.style.fontWeight = weight; text.style.fontSize = size + 'px'; } changeStyle(); <label for="text">Text: </label> <input type="text" name="text" id="data" placeholder="Type your word" onchange="changeStyle()" value="Sample input"><br> <label for="s">Size: </label> <input type="range" name="s" id="size" min="10" max="50" onchange="changeStyle()"><br> <label class="we" for="w">Weight: </label> <input type="range" name="w" id="weight" min="10" max="600" onchange="changeStyle()"><br> <label for="c">Color: </label> <input type="color" name="c" id="color" onchange="changeStyle()"> <br/><label class="main" id="word" onchange="changeStyle()">Sample input</label>