为什么颜色、大小和重量不随游骑兵而改变

Question

为什么不工作。大小，重量，颜色不变。我创建了一个标签和一些范围输入来改变它的大小，重量和颜色。

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;

Answer 1

我已经做了一些步骤，使您的代码工作:

步骤1:将所有代码放入changeStyle()函数中，并将其放入所有<input>标签中的onchange="changeStyle()"中。我在init页面上运行changeStyle()，也使它通过HTML中的当前数据设置示例数据。

步骤2:修改.style.fontSize的取值范围为size + 'px'

步骤3:修复HTML属性from="10" to="50"到min="10" max="50"。你可以在这里找到更多。

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>