Why color, size and weight is not changing by ranger-CodePudding

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;

CodePudding user response：

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>