input onchange in for loop changing the last variable in loop?

Question

hello everyone I'm relatively new to javascript and I'm trying to use an input range with an onchange event but I make them in a loop from information that I get from the database sort of like this

var splitstring = response.split(String.fromCharCode(30));
for (var i = 0; i < splitstring.length; i++) {
  type = details[0];
  actualId = details[1];
  userId = details[2];
  time = details[3];
  //that's user details or whatever so i make the H2 and the range   


  var range = document.createElement("INPUT");
  var spanchange = document.createElement("H2");
  spanchange.appendChild(document.createTextNode("0 - neutral"));
  spanchange.style.cssFloat = "right";
  range.setAttribute("type", "range");
  range.setAttribute("class", "horizontal-lowest-first");
  range.setAttribute("min", "-100");
  range.setAttribute("value", "0");
  range.setAttribute("name", "range");
  var change = function() { ///range onchange to php :)
    var ranges = spanchange;
    var x = this.value;
    var then = x;

    if (x < -90) {
      then = x + " : " + "Extremely Poor";
    } else if (x < -80) {
      then = x + " : " + "Very Poor";
    } else if (x < -70) {
      then = x + " : " + "Pretty Bad";
    } else if (x < -60) {
      then = x + " : " + "Bad";
    } else if (x < -50) {
      then = x + " : " + "Not Good";
    } else if (x < -40) {
      then = x + " : " + "Phhhhst";
    } else if (x < -30) {
      then = x + " : " + "Oh No!";
    } else if (x < -20) {
      then = x + " : " + "Needs Work";
    } else if (x < -20) {
      then = x + " : " + "Crap";
    } else if (x < -10) {
      then = x + " : " + "Welp";
    } else if (x < 0) {
      then = x + " : " + "Downvote";
    } else if (x == 0) {
      then = x + " : " + "Neutral";
    } else if (x < 10) {
      then = x + " : " + "OH";
    } else if (x < 20) {
      then = x + " : " + "Better";
    } else if (x < 30) {
      then = x + " : " + "Yay";
    } else if (x < 40) {
      then = x + " : " + "Pretty Good";
    } else if (x < 50) {
      then = x + " : " + "Mediocre";
    } else if (x < 60) {
      then = x + " : " + "Great";
    } else if (x < 70) {
      then = x + " : " + "Yes!";
    } else if (x < 80) {
      then = x + " : " + "Awesome";
    } else if (x < 90) {
      then = x + " : " + "Very Good";
    } else if (x < 100) {
      then = x + " : " + "Top Grade";
    } else if (x == 100) {
      then = x + " : " + "Perfect!!";
    }
    console.log("inside onchange" + "    " + then);
    // var x = spanchange.childNodes[0];
    // x.replaceData(0, 20,then);
    ranges.innerHTML = then;
  };
  range.onchange = change;
}

then it adds the elements to a div and appends the div to the body then goes through the loop again so in the function for onchange where i put

ranges.innerHTML = then;

it always changes the spanchange in the last for loops iteration so i mean if i change the first appended range, it sets the value of the last appended spanchange but i want it to change the spanchange that was in the same iteration of the for loop as that range, it sounds nuts i know I'm trying to explain, i hope someone can understand

if you can give me any advice id greatly appreciate it thank you

onchange gets called as a result of an event - the value of `spanchange` is probably not what you expect — Jaromanda X, Aug 23 '16 at 01:34
right so is there a way to make the onchange function of that iteration reference the spanchange of the same iteration — JRowan, Aug 23 '16 at 01:35
the phrase you want to look for is `closure` - see https://stackoverflow.com/documentation/javascript/480/scope/1575/closures#t=201608230137057748783 — Jaromanda X, Aug 23 '16 at 01:36
i tried to do a closure example that ive seen on stackoverflow but i couldn't get it to work it would just fire the onchange once it loaded and then it wouldn't fire the onchange again, that was putting parameters into the function, I'm pretty stuck on this — JRowan, Aug 23 '16 at 01:37
Looks like the [infamous JS loop issue](http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue) to me. (By the way, would it have killed you to format your code with sensible indenting before posting?) — nnnnnn, Aug 23 '16 at 01:38
ahhhh, i figured it out, thanks for direction, sorry about the formatting, thanks again — JRowan, Aug 23 '16 at 02:05

input onchange in for loop changing the last variable in loop?

0 Answers0