JavaScript NOT WORKING

JavaScript NOT WORKING
0

#1

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.


#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

What are you expecting your page to do? If you give us an idea of what you expect, we can offer better guidance on how best to approach.


#3

Are you sure that you have your directory structure correct?


#4

Thank you for your assistance.

I want the user to be able to click on the words in the

    and edit the words by typing into the text form and pressing enter or clicking out.

#5

the “events.js” is in the “js” folder and the html is living right outside of that folder. I have a different folder for the css, and it’s working fine.


#6

When I run your code, I can click on the textbox for Apples and change it to Watermelon and after I click out or tab out or press enter, the textbox and the text beside the textbox will change to Watermelon. The same applies to the other textboxes. Is that what you want to happen?


#7

Yes! I think Javascript isn’t working on any of my browsers (I already checked my browser settings, and javascript is enabled).

I recently installed SublimeLinter on my ST3, and in doing so, I needed to install jQuery, and JShint using terminal, which I have no knowledge about. I might have changed the $PATH, or whatever it may be during the process. Would you know if this might have affected my computer’s capability of reading javascript functions? Thank you in advance.