How can I modify an HTML element from an external Javascript File?
Question
I want to show an input when a checkbox is checked. So, I have created a js function to do it and when I write that function on the HTML file it works. But I want to write that function into an external Javascript file an use it from there. How can I do it?
HTML Code:
<!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>
Javascript file:
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";
}
}
EDIT: It appears this error:
showInput.js:4 Uncaught TypeError: Cannot read property 'checked' of null at showInput.js:4
2 answers
solution1
1 ACCPTED 2019-12-05 10:50:05
If only thing why you need javascript here is to change class, to show / hide element than instead what you can do is to write code in pure css and html, using input:checked to change visibility.
Also nextButton should be targetable by css, like element or its parent is same lvl and after input
#hood:checked ~ .nextButton { display: block; } .nextButton {display: none;} <input type="checkbox" name="hood" id="hood"> <label for="hood">Hood</label><br> <input type="submit" value="Next" class="nextButton"/>
solution2
-1 2019-12-05 10:51:52
Try onchange instead of onclick , and clear up the HTML - the function works as intended! :)
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"; } }
<form class="formComplement" action="" method="POST"> <div class="mainContainer"> <input type="checkbox" name="hood" id="hood" onchange="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>
(I deleted the action from the form , as it made no sense in the snippet.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.