Question

我有以下代码：

JS：

        function updateLink()
        {
                var selType = document.getElementByID("Types");
                var selLen = document.getElementByID("Length");
                var selLoc = document.getElementByID("Location");
                var selMan = document.getElementByID("Manufacturer");

                var test = document.getElementByID("test");
                test.innerHTML="Test";

                var selectedType = (selType.options[selType.selectedIndex].text);
                var selectedLength = (selLen.options[selLen.selectedIndex].text);
                var selectedLocation = (selLoc.options[selLoc.selectedIndex].text);
                var selectedManufacturer = (selMan.options[selMan.selectedIndex].text);
                document.getElementById("apply").href="myURL?typeName="+selectedType+"length="+selectedLength+"location="+selectedLocation+"manufacturer="+selectedManufacturer;
        }
</script>

和HTML

 <div id="filterdiv" class="dark">
                <center><h3 id="test">Filters</h3></center>
                <br>
                <center>Type</center>
                <select id="Types" onchange="updateLink()">
                <option>All</option>
                {% for types in TypesList %}
                <option>{{types}}</option>
                {%endfor%}
                </select>
                <br>
                <br>

                <center>Inspection Period</center>
                <select id="Inspection Period">
                <option>All</option>
                {% for inspections in InspectionList %}
                <option>{{inspections}}</option>
                {%endfor%}
                </select>
                <br>
                <br>

                <center>Length</center>
                <select id="Length">
                <option>All</option>
                {% for lengths in LengthList %}
                <option>{{lengths}}</option>
                {%endfor%}
                </select>
                <br>
                <br>

                <center>Location</center>
                <select id="Location">
                <option>All</option>
                {% for locations in LocationList %}
                <option>{{locations}}</option>
                {%endfor%}
                </select>
                <br>
                <br>

                <center>Manufacturer</center>
                <select id="Manufacturer">
                <option>All</option>
                {% for manufacturers in ManufacturerList %}
                <option>{{manufacturers}}</option>
                {%endfor%}
                </select>


                <br>
                <br>
                <a href="" id="apply"><button onclick="updatelist()">Apply Filter (TODO)</button></a>
                <a href="http://myURL"><button>Reset Filters</button></a>

 </div>

这是选择框的列表，其中的选项取自我的Django模型，用于过滤另一个div中的列表。按下我的按钮后，我将重定向到相同的URL，未附加任何参数。我用来更改标题的测试字符串也没有任何改变。因此，我怀疑我的JS代码从未触发过。有人可以帮我吗？

我知道我的onchange仅适用于“类型”选择框。该代码不完整。我正在使用“类型”框进行测试。

myURL替代了我目前托管在其上的本地地址。

Answer 1

替换此片段：

<br>
                <br>
                <a href="" id="apply"><button onclick="updatelist()">Apply Filter (TODO)</button></a>
                <a href="http://myURL"><button>Reset Filters</button></a>

此：

 <input type="button" value="Click me" onclick="updatelist()">

Answer 2

我注意到为我回答此问题的用户删除了他们的评论。答案是一个简单的语法错误。我已经将ID中的两个字母都大写了GetElementById。关于语法和区分大小写的课程！

选择onchange标签不能运行我的Javascript函数

2 个答案: