如何从外部Javascript文件修改HTML元素？_Javascript_Html

如何从外部Javascript文件修改HTML元素？

javascript html

如何从外部Javascript文件修改HTML元素？,javascript,html,Javascript,Html,我想在选中复选框时显示输入。因此，我创建了一个js函数来实现它，当我在HTML文件上编写该函数时，它就可以工作了。但我想将该函数写入一个外部Javascript文件，然后从那里使用它。我怎么做 HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Complement Sele

我想在选中复选框时显示输入。因此，我创建了一个js函数来实现它，当我在HTML文件上编写该函数时，它就可以工作了。但我想将该函数写入一个外部Javascript文件，然后从那里使用它。我怎么做

HTML代码：

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Complement Selection</title>

        </head>
        <body>
    <form class="formComplement" action="../php/complementSelectionSave.php" method="POST">
                <div class="mainContainer">
<input type="checkbox" name="hood" id="hood" onclick="showInput()">
                            <label for="hood">Hood</label><br>
                            <div class="inputBox" id="hoodNum" style="display:none">
                                <input type="number" name="hoodNumber" id="hoodNumber" required="" value="">
                                <label for="hoodNumber">Number of Hoods</label>
                                <br>
                            </div>
                        </div>
                <br><br><br>
                <input type="submit" value="Next" class="nextButton"/>
            </form>
            <script src="showInput.js"></script>
        </body>
    </html>

编辑：出现以下错误：

showInput.js:4未捕获类型错误：无法读取的属性“checked” 无效的在showInput.js:4

若你们在这里需要javascript的唯一原因是改变类，显示/隐藏元素，那个么你们能做的就是用纯css和html编写代码，使用input:checked来改变可见性

同样，下一个按钮应该是css的目标，就像元素或者它的父元素是相同的lvl和after input一样

发动机罩：选中~。下一个按钮{ 显示：块； } .nextButton{display:none；} 罩尝试onchange而不是onclick，并清除HTML-该函数按预期工作！：

函数showInput{ var checkBox=document.getElementByIdhood； var inputBox=document.getElementByIdhoodNum；如果checkBox.checked==true{ inputBox.style.display=块； }否则{ inputBox.style.display=无； } } 罩发动机罩的数量

但我想将该函数写入一个外部Javascript文件，然后从那里使用它。我该怎么做和问题中的代码完全一样，有什么问题吗？看起来你的代码工作正常。你所做的没有明显的错误。如果你有什么错误，请告诉我们到底发生了什么。如果没有足够的信息，则不起作用。您知道如何使用浏览器的开发人员工具检查错误吗？@Sorikairo它在HTML onclick=showInput中被称为内联…老派，但非常有效。@Andris这有一些问题，但不太可能是问题的原因，由于OP notes，当包含在页面内联的脚本标记中时，代码可以工作。如果浏览器js关闭时也可以工作，为什么要进行向下投票P

function showInput() {
    var checkBox = document.getElementById("hood");
    var inputBox = document.getElementById("hoodNum");
    if (checkBox.checked == true) {
        inputBox.style.display = "block";
    } else {
        inputBox.style.display = "none";
    }
}