fbliss fbliss - 3 months ago 11
HTML Question

How to create a toggle button that dynamically changes HTML content?

Let me preface this by stating that this is my first question on SO, so I apologize in advance if I am incidentally violating any conventions. I have been working on this question for several days, and have researched it on SO as well as the web at large and was unable to find material that helped me solve it.

I am trying to create a weather app that can toggle the weather units displayed between Fahrenheit and Celsius. I start by appending the weather in Fahrenheit, and then I have created an event handler that conditionally changes the inner content of the associated element based on whether that element is currently displaying "F" or "C".

As it is, my app successfully loads with the Fahrenheit temperature, and toggles to Celsius on click, but it will not toggle back to Fahrenheit. I assume there is some issue with how the events are registered, but for the life of me I cannot figure it out.

Here is my code:

var fahr = document.createElement("a");
fahr.attr = ("href", "#");
fahr.className = "tempUnit";
fahr.innerHTML = tempf + "&deg;F" + "<br/>";
$("#currentWeather").append(fahr);

var cels = document.createElement("a");
cels.attr = ("href", "#");
cels.className = "tempUnit";
cels.innerHTML = tempc + "&deg;C" + "<br/>";

var units = document.getElementsByClassName("tempUnit");

$(".tempUnit").click(function() {
if (units[0].innerHTML.indexOf("F") != -1) {
$(".tempUnit").replaceWith(cels);
}
else {
$(".tempUnit").replaceWith(fahr);
}
})


Thank you so much in advance! Happy to provide additional information if necessary.

Answer

Currently what you are using is called a direct binding which will only attach to element that exist on the page at the time your code makes the event binding call.

As you using replaceWith(), existing element is replaced with new element and event handlers are not attached with them.

You need to use Event Delegation using .on() delegated-events approach.

General Syntax

$(parentStaticContainer).on('event','selector',callback_function)

Example, Also use this i.e. current element context and use setAttribute() to update href element

$("#currentWeather").on("click", ".tempUnit", function() {
      if (this.innerHTML.indexOf("F") != -1) {
        $(this).replaceWith(cels);
      }
      else {
        $(this).replaceWith(fahr);
      }
})

var tempf = 212;
var tempc = 100;

var fahr = document.createElement("a");
fahr.setAttribute("href", "#");
fahr.className = "tempUnit";
fahr.innerHTML = tempf + "&deg;F" + "<br/>";
$("#currentWeather").append(fahr);

var cels = document.createElement("a");
cels.setAttribute("href", "#");
cels.className = "tempUnit";
cels.innerHTML = tempc + "&deg;C" + "<br/>";

$("#currentWeather").on("click", ".tempUnit", function() {
  if (this.innerHTML.indexOf("F") != -1) {
    $(this).replaceWith(cels);
  } else {
    $(this).replaceWith(fahr);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="currentWeather"></div>

Comments