JavaScript/jQuery trying to make a reset page function

Question

I'm trying to make a function which can be called to reset the page into the state before modifications were made. Now the normal JS one worked but it broke my other function which provided answers for the quiz via div population.

I've tried

var originalState = $("health").clone();  

$(".reset").click(function() {
 console.log('called');
 console.log(originalState);
$("health").replaceWith(originalState.clone());
 console.log(originalState);
});

And with vanilla script

var container = document.getElementById("health");
var content = container.innerHTML;

//function reset() {
  //var container = document.getElementById("health");
  //container.innerHTML = html;
  //answers = [];
//}

var html;
window.onload = function() {
  html = document.getElementById("health").innerHTML;
};

This gets broken by the JS fix.

$(".correctKey").click(function() {
    $(".dropbox").each(function(index) {
        $(this).text(correctAnswers[index]);
        answers = correctAnswers.slice();
    });
});

HTML (Not sure if it'll help)

Louys Patrice Bessette · Accepted Answer

Close... Close... Just missing concepts.
The "global variable" will stay as long as the page is loaded...
And as long as it isn't changed.

var originalState = $("health").clone();   // Global variable holding
                                           // the "onload state" html.

$(".reset").click(function() {
  console.log('Reset called');
  $("health").replaceWith(originalState);  // HERE, originalState is the global variable.
                                           // Not the original element itself.
                                           // No need to re-clone it.

  answers = []:                            // Reset this variable too?
});

Then event delegation, as Alexander Staroselsky correctly mentionned, is needed to access elements "replaced"... Since the DOM "Document Object Model" will not be notifed of these changes, you have to care about how to access those "new" elements after an append(), prepend(), before(), after(), replaceWith(), etc...

You have to alway "attach" the function, particularly the one which are event triggered, to "static" elements, and delegate... Or starting from a "static" element, use find or eq to target them.

And there is the event.target trick also... For some uses.

$("#health").on("click", ".correctKey", function() {    // [event], [target], [function]
  $("#health").find(".dropbox").each(function(index) {  // Always start form a "static" element.
    $(this).text(correctAnswers[index]);

    answers = correctAnswers.slice();                   // I don't know what you do with this variable.
                                                        // But there a possible need to reset too...
  });
});

I think the code above should work.
No apparant big changes, as you can see.

But details matter.

«What's not in DOM on load, is dynamic.»
«Static can become dynamic»
«Static element can hold dynamic elements/content... Think "wrapper"»

JavaScript/jQuery trying to make a reset page function

Answers (2)

Related Questions