使用html和javascript简单生成按钮，完成后保存

我试图通过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>

宽度：


高度：




背景：


半径：




保证金：




衬垫：




框阴影：




颜色：



边框宽度：



边框样式：



边框颜色：



文本对齐：



字体大小：

---

我的按钮

为元素提供一个ID，以便您可以访问它：

<input type="range" id="widthrange" name="widths"/>

---

要触发javascript函数，您需要监听更改/事件

这使用的是

oninput

属性。每次范围有新输入时，这将触发/调用javascript函数

myfunc

现在使用的是id属性，而不是名称属性

document.getElementById（“”）

用于将元素作为目标

document.getElementById（“”）.value

用于将元素值作为目标

函数myfunc（）{
//为MyRange元素指定一个变量。
var MyVariable=document.getElementById（'MyRange'）；
//以MyText输入为目标，并将该值更改为MyVariable的值。
document.getElementById（'MyText'）。value=MyVariable.value+'px'；
//目标MyBtn的样式-宽度
document.getElementById（'MyBtn'）.style.width=MyRange.value+'px'；
}

宽度：

我的按钮

为什么有两个同名输入？我没有正确理解您的问题。您想让您的代码生成一个由用户在两个输入字段中设置宽度和高度的值吗？正如Barmar指出的，您可以给元素ID以便访问它们，或者您可以使用

document.frm['widths']。值

您需要保持名称唯一。我个人会给元素ID。我只是将此作为第二个解决方案发布。如果不保持元素名称的唯一性，则可以使用

document.frm['widths'][0]。value

-

document.frm['widths'][1]。value

具有的第一个元素将使用

[0]

，第二个元素将使用

[1]

。我确信您可以计算出它是如何递增的。@Barmar，因为我想在这个输入上显示范围的值，或者我可以在输入文本中键入值。@RohitKumar是的，我知道。当我更改为范围或在输入文本中键入值时，我希望按钮自动生成宽度、高度。感谢您的帮助，但当更改范围位置时，它将检查像素并将其应用于按钮的宽度（增加按钮宽度）。@PherumChheang您希望范围更改按钮的宽度吗？您的问题是“如何捕捉范围的值”。此示例演示了如何做到这一点。我不确定你想用这个按钮做什么。你能说清楚一点吗？当您的问题变得更清楚，更符合您的愿望时，我将编辑答案。是的，我希望范围更改按钮的宽度。但我不知道如何用JavaScript来完成它。我将输入文本的值放入px中，以应用按钮，它可以很好地处理这个问题。但是如果我只有输入型文本，我应该怎么做呢。填充：
@pherumcheang如果您输入文本是什么意思？您的问题是如何获取范围并将其显示在输入文本框中，然后您希望它更改按钮的宽度。如果你想扩大你的问题，你可以给出你想要实现的全部细节。这将保存对答案的多个编辑。如果这能回答您的问题，我们也将不胜感激。

var width = document.getElementById("widthrange").value;