问题描述
我尝试通过HTML和JavaScript生成一个简单的按钮。 不幸的是，我不知道如何使用JavaScript从输入范围HTML中获取价值以申请按钮。 如何使用JavaScript从HTML范围中获取价值？ 这是我的html代码：
<form name='frm'>
<div id="div">
<label>
Width:
<input type="text" id="MyText"/>
<input type="range" id="MyRange" oninput="myfunc()"/>
</label><br/>
<label>
Height:
<input type="text" id="height"/>
<input type="range" id="heights" oninput="myfunc()"/><br/>
</label><br/>
<label>
Background:
<input type="text" id="bdg"/>
<input type="color" id="background"/>
<!--/* <input type="range"/>
<input type="imge" name="imge"/>*/-->
</label><br/>
<label>
Radius:
<input type="text" name="rad" id="Radius"/>
<input type="range" name="rad" id="Rd"/><br/>
</label><br/>
<label>
Margin:
<input type="text" name="margin" id="margin"/><br/>
</label><br/>
<label>
Padding:
<input type="text" name="padding" id="padding"/><br/>
</label><br/>
<label>
Box-shadow:
<input type="text" name="shadow" id="shadow"/><br/>
</label><br/>
</div>
<div id="div">
<label>
Color:<br/>
<input type="text" name="col" id="color"/>
<input type="color" id="colors"/><br/>
</label>
<label>
Border-width:<br/>
<input type="text" name="bdwidths" id="bw"/>
<input type="range" id="bdw"/><br/>
</label>
<label>
Border-style:<br/>
<input type="number" name="bdstyle" id="bdstyle"/><br/>
</label>
<label>
Border-color:<br/>
<input type="number" name="bdcol" id="bdcolor"/>
<input type="color" id="color"/><br/>
</label>
<label>
Text-align:<br/>
<input type="number" name="aligns" id="ta"/><br/>
</label>
<label>
Font-size:<br/>
<input type="number" name="font" id="font"/>
<input type="range" id="font-size"/><br/><br/>
</label>
<label>
<input type="button" value="save change" onclick="save()"/>
</label>
</div>
</form>
我的按钮
1楼
NewToJS
2
已采纳
2015-07-26 12:58:42
要触发javascript函数，您需要侦听更改/事件。
这是使用oninput属性。
每当范围有新输入时，都会触发/调用javascript函数myfunc 。
现在，它使用的是id属性，而不是name属性。
document.getElementById('')用于定位元素document.getElementById('').value用于定位元素值。
function myfunc(){ //Assign a variable to the MyRange element. var MyVariable= document.getElementById('MyRange'); //Target the MyText input and change the value to the value of MyVariable. document.getElementById('MyText').value=MyVariable.value+'px'; //Target MyBtn's style - width document.getElementById('MyBtn').style.width=MyRange.value+'px'; }
Width:<input type="text" id="MyText"/><br/> <input type="range" id="MyRange" oninput="myfunc()"/> <button id="MyBtn">My Button</button>
如果您不理解任何源代码，请在下面留下评论，我将为您逐行解释，以便您了解其工作原理。 最好是了解事物的工作原理，而不是复制/粘贴并希望达到最佳效果。
JavaScript应该放在script标签内
<script type="text/javascript"> //Place Javascript Here.... </script>
我希望这有帮助。 编码愉快！
2楼
Barmar
0
2015-07-26 12:26:08
给该元素一个ID，以便您可以访问它：
<input type="range" id="widthrange" name="widths"/>
然后，您可以在Javascript中执行以下操作：
var width = document.getElementById("widthrange").value;