我需要使用一对范围输入滑块中的值动态设置网格。基本上，我现在正在做的是将它们放在一个表单中，以便每次输入更改时都可以提交。但是，这不是解决方案，因为每次我尝试更改它时，它都会提交表单，因此输入滑块被“卡住”。
<form id='chartSize' method='get'>
<div class="slidecontainer">
<pre>Rows: </pre>
<input type="range" min="1" max="10" class="slider" name="rows" id="rows"
oninput="changeDimensions(true)">
<output name="rowOutputName" id="rowOutputId"></output><br/>
<pre>Columns:</pre>
<input type="range" min="1" max="10" class="slider" name="columns" id="columns"
oninput="changeDimensions(false)">
<output name="colOutputName" id="colOutputId"></output><br/>
</div>
</form>
任何帮助将不胜感激。
编辑：changeDimensions脚本实际上与问题有关。
这里是：
function changeDimensions(opt)
{
if(opt==true)
{
rowOutputId.value = rows.value;
}
else
{
colOutputId.value = columns.value;
}
document.getElementById('chartSize').submit();
}
form在这种情况下使用a的唯一原因是为了提供可访问性：使用表单的通常原因是使用户能够输入值，然后将这些值发送到服务器。您并没有这样做-您要做的就是获取输入的值并使用它们，而不必提交表单。
另外，您不应该在HTML内添加Javascript处理程序-它们本质上是eval在HTML标记内，并且会导致分解系数差，难以管理的代码。用Javascript附加侦听器：
const rowOutputId = document.querySelector('#rowOutputId');
const colOutputId = document.querySelector('#colOutputId');
const rows = document.querySelector('#rows');
const columns = document.querySelector('#columns');
rows.addEventListener('change', () => rowOutputId.value = rows.value);
columns.addEventListener('change', () => colOutputId.value = columns.value);<form id='chartSize' method='get'>
<div class="slidecontainer">
<pre>Rows: </pre>
<input type="range" min="1" max="10" class="slider" id="rows">
<output id="rowOutputId"></output><br/>
<pre>Columns:</pre>
<input type="range" min="1" max="10" class="slider" id="columns">
<output id="colOutputId"></output><br/>
</div>
</form>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句