Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Traversing Elements

Posted by Matt Bloomer
Matt Bloomer
10,608 Points

.onchnage

I have both watched the video over and gone to the men and looked at the information they have there, and I still do not understand when and where one would use .onchange. Can someone please dumb this down for me so I can understand? I have included the code from the lesson:

var bindTaskEvents= function(taskListItem, checkBoxEventHandler){ console.log("Bind list item events"); //select taskListItem's children var checkbox= taskListItem.querySelector("input[type=checkbox]"); var editButton=taskListItem.querySelector("button.edit"); var deleteButton=askListItem.querySelector("button.delete"); //bind the editTask to the edit button editButton.onclick= editTask; //bind the deleteTask to the delete button deleteButton.onclick=deleteTask; //bind checkBoxEventHandler to the checkbox checkBox.onchange=checkBoxEventHandler; }

app.js 
//Select the naviagation
var navigation = document.getElementById("navigation");

//Select all listItems from the navigation
var listItems = navigation;

//When a navigation link is pressed
var linkListener = function() {
  console.log("Listener is clicked!");
}

var bindEventsToLinks = function(listItem) {
  //Select the anchor
  var anchor = listItem;
  //Bind the linkListener to the anchor element (a) 
  anchor.onclick = linkListener;
}

for(var i = 0; i < listItems.length ; i++) {
    bindEventsToLinks(listItems[i]);
}
index.html 
<!DOCTYPE html>
<html>
<head></head>
<body>

<ul id="navigation">
  <li>
    <a href="#home">Home</a>
  </li>
  <li>
    <a href="#about">About</a>
  </li>
  <li>    
    <a href="#contact">Contact</a>
  </li>
</ul>

<p>A few of my favourite things:</p>
<ul>
  <li>
    Rain drops on roses
  </li>
  <li>
    Whiskers on kittens
  </li>
  <li>
    Brown paper packages wrapped up with string
  </li>
</ul>

<script src="app.js"></script>
</body>
</html>

1 Answer

miikis
miikis
44,957 Points

Basically, when a given input's value is changed, the onchange event is triggered. Here's W3 School's definition:

Definition and Usage The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed. Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on <keygen> and <select> elements.

Here's an example from there as well