Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

.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

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