Appending to a Div with JS not working?

This is the link to my codepen --> https://codepen.io/Mike-was-here123/pen/PQOYjB?editors=1010

We will be focusing on the algebra calculator and the log (bottom)

You can go to the html and skip all the way down to line 111 where the algebra calculator starts (left) and the log is on line 140 (right).

If you look at the log, you can see there is a x and y box. I’m trying to appended that from the JS (Line 8 -> 26) into the div id “outputLog” which can be found on line 144 (CSS line 242). This is where all the boxes will go. Line 146 is the example box you see when you load up the page.

If you look (starting on) line 20 you can see i’m trying to append that very same box into the outputLog div when you press calculate.

(notice how i target by class)

$(".outputLog").append("<ul><li class='outputItem'><div class='row'><div id='x'>"+x+"</div><div id='y'>"+eval(equation)+"</div></div></li></ul>")

For some reason, it just doesn’t show up. Did i do something wrong? I get no errors in the console. I used to target the div by id but that didn’t work either. The examples i have seen with append targeted by class. Even if something is wrong with the variables x and equation, that shouldn’t affect it.

Please tell me to correct my question if its missing anything or unclear. I tried to make this as clear as possible by adding line numbers.

It looks like you may have changed your code a bit since then, but I had a quick look and I think it’s because the line that you mentioned is inside a function, graph(), that never gets called:

  // This is for algebra calculatior 
  $("#calculateAg").on("click", function() {
    // line 126
    document.getElementById("outputLog").innerHTML = "";
    // line 144
    var y = document.getElementById("equationAg").value;
    // line 120
    var x = document.getElementById("xAg").value;
    // line 124
     $("#equationLog").html("y="+y)
    // line 143
    function graph(equation, range) {
      var x = 0;
      while (x <= range) {
        $(".outputLog").append("<ul><li class='outputItem'><div class='row'><div id='x'>"+x+"</div><div id='y'>"+eval(equation)+"</div></div></li></ul>")
        // line 144
        x++;
      }
    }
  });

Thanks, i don’t know how i didn’t notice that. I did call it in the first place, but got a error. I moved some stuff around, fixed some stuff and forgot to call it.

It works now :smiley: