Why this is not working. The size, weight, color not changing. I created a label and some range input to change its size, weight and 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;
I have make some steps to make your code works:
Step 1: Bring all of your code into a changeStyle() function and put it into onchange="changeStyle()" in all of <input> tag. And I run changeStyle() on init page also to make it set your sample data by current data from HTML.
Step 2: Fix .style.fontSize range by set the value to size + 'px'.
Step 3: Fix HTML attributes from="10" to="50" to min="10" max="50". You can find out more here.
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>