Hey ppl, I have a question regarding Javascript execution.
I am watching a youtube video, and just mimicking the tutorial, but somehow, I cannot seem to activate javascript when previewing the html. I have tried it on chrome and firefox, but the same result. The html and css seems to be working fine.
Here is the HTML code:
<head>
<title>JavaScript Events 02</title>
<link rel="stylesheet" type="text/css" href="css/events-tutorial-2.css">
</head>
<body>
<header>
<h1>Javascript Events</h1>
</header>
<main>
<ul id="checklist">
<li>
<span>Apples</span>
<input value="Apples" />
</li>
<li>
<span>Oranges</span>
<input value="Oranges" />
</li>
<li>
<span>Bananas</span>
<input value="Bananas" />
</li>
</ul>
</main>
<script src="/js/events.js"></script>
</body>
</html>
The JavaScript code is:
var checklist = document.getElementById("checklist");
var items = checklist.querySelectorAll("li");
var inputs = checklist.querySelectorAll("input");
for (var i = 0; i < items.length; i++) {
items[i].addEventListener("click", editItem);
inputs[i].addEventListener("blur", updateItem);
inputs[i].addEventListener("keypress", itemKeypress);
}
function editItem() {
this.className = "edit";
var input = this.querySelector("input");
input.focus();
input.setSelectionRange(0, input.value.length);
}
function updateItem() {
this.previousElementSibling.innerHTML = this.value;
this.parentNode.className = "";
}
function itemKeypress(event) {
if (event.which === 13) {
updateItem.call(this);
}
}
I would greatly appreciate it if you could help. Thanks.