0

I'm working on a project w/ a series of buttons that do different functions. And my current dilemma that does not make sense to me is why a button stops working when I click the default button.

The point of the default button, is to return the values and code back to normal w/o refreshing the page. And so it uses the innerHTLM script to change the smiley icon back to normal, but this stops the smiley icons onClick function from working on it. And this doesn't make sense to me, can someone explain why that is? Code below

  • JS code:
document.getElementById("clear-icon").onclick = function() {defaultState()};

document.getElementById("smile-icon").onclick = function() {smileMotherDude()};

function smileDude() {
  document.getElementById("clickaButton").innerHTML = "YOU ARE DOING AMAZING!";
}

document.getElementById("yinyang-icon").onmousedown = function() {shockedFace()};

document.getElementById("yinyang-icon").onmouseup = function() {faceSwap()};

function defaultState() {
  document.getElementById("clickaButton").innerHTML = "CLICK SOMETHING";
  document.getElementById("face-icon").innerHTML = '<i align="center" id="smile-icon" class="button fa-solid fa-face-smile" value="1"></i>';
  document.body.style.background = "black";
};

$(function() {
  $('#yinyang-icon').hover(function() {
    $('#smile-icon').css('color', '#FF842E');
  }, function() {
    // on mouseout, reset the background colour
    $('#smile-icon').css('color', 'yellow');
  });
});

function shockedFace() {
  document.getElementById("face-icon").innerHTML = "<i align='center' class='button fa-solid fa-face-surprise' style='color:#FF842E'></i>" ;
};

function faceSwap() {
  document.getElementById("face-icon").innerHTML = "<i align='center' id='sad-icon' class='button fa-solid fa-face-sad-tear' value='2'></i>"
  • HTML code:
<body>
<table align="center" size="3" >
  <tr> 
    <td  colspan="3" class="displaBoxTd">
      <div align="center" class="displayBox" id="displayBox">
        <p id="clickaButton">CLICK SOMETHING</p>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#">
       <i align="center" id="clock-icon" class="button fa-solid fa-clock"></i> 
      </a>
    </td>
     <td>
      <a href="#">
        <i align="center" id="yinyang-icon" class="button fa-solid fa-yin-yang"></i> 
      </a>
   </td>
    <td>
     <a href="#">
        <i align="center" id="color-icon" class="button fa-solid fa-rainbow"></i> 
      </a> 
    </td>
  </tr>
  <tr>
    <td>
      <a href="#">
        <i align="center" id="applepie-icon" class="button fa-solid fa-pizza-slice"></i> 
      </a> 
    </td>
    <td>
    <a href="#" id="face-icon">
        <i align="center" id="smile-icon" class="button fa-solid fa-face-smile" value="1"></i> 
      </a>
    </td>
    <td>
      <a href=#>
        <i align="center" id="clear-icon" class="button fa-solid fa-eraser"></i>
      </a>
    </td>
</tr>
</table>
</body>

I've tried adding a section in the html code itself rather than w/ the rest of the js script.

I've tried editing the ids and attempted an if else statement using the id values but botched that w/ no success. And at this point this is a problem I just can't grasp the concept of why it stops functioning.

NicKreb
  • 3
  • 3
  • 1
    By replacing the `innerHTML` you are effectively destroying the existing HTML elements and dynamically creating new ones, and those new ones do not have any click events associated with them. The linked duplicate includes information on how to handle events for dynamically created elements. – David Jun 21 '23 at 17:54
  • @AndrewMorton ope! sorry about that, changed it to fit a better form of social etiquette. – NicKreb Jun 21 '23 at 18:03
  • @David Ah! thank you, that was what I was having trouble grasping. I appreciate you taking the time to respond so quickly :) – NicKreb Jun 21 '23 at 18:03

0 Answers0