Question

我有一个带有进度标记的表单标记，其中三个提交如下：

<form>
    <progress min="0" max="100" value="0"></progress>
    <input type="submit" value="submit1">
    <input type="submit" value="submit2">
    <input type="submit" value="submit3">
</form>

我有一个小js代码，用于侦听click事件并更改进度条的值。

;(function(){
    document.body.addEventListener('click', function(){
        var p = document.querySelector('progress');
        var s = document.querySelector('input');
        var val;
        if(s.value=="submit1"){
            val=33;
        }
        if(s.value=="submit2"){
            val=66;
        }
        if(s.value=="submit3"){
            val=100;
        }
        p.value=val;
    }, false);
}());

但进度条没有按预期工作。

我可以解决这个问题吗？

Answer 1

关于document.querySelector：

返回文档中的第一个元素（使用文档节点的深度优先预先遍历遍历），与指定的选择器组匹配。

因此，代码总是会返回“submit1”，因为它是文档中的第一个元素。同时表单的提交回调到页面，你无法看到更改，因为代码将返回到初始阶段。如果您不想进行回调，只需将输入类型更改为“按钮”即可。另外，我建议您将onclick事件附加到每个按钮并调用您想要的功能。

编辑：工作代码如下。

<form>
        <progress min="0" max="100" value="0" id="progressBar1"></progress>
        <input type="button" value="submit1" onclick="SubmitProgress(33);" />
        <input type="button" value="submit2" onclick="SubmitProgress(66);" />
        <input type="button" value="submit3" onclick="SubmitProgress(100);" />
    </form>
    <script type='text/javascript'>
        function SubmitProgress(valueToSet) {
            document.getElementById("progressBar1").value = valueToSet;
        }
    </script>

Answer 2

在你的javascript中 - 错字可能是杀死脚本的原因。而不是使用

;(function(){

使用此：

$(function(){

Javascript - javascript点击事件的进度元素的设置值属性

2 个答案: