Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Dynamic content vs. manipulating document body

  • Thread starter Deleted member 2829
  • Start date
D

Deleted member 2829

Guest
On my web page I have a table or list that is populated dynamically. The rows/items have an onclick() handler so that when I click on one it gets highlighted (and the one previously highlighted gets un-highlighted). This works perfectly fine, UNTIL I temporarily change the document body html and replace it back to its original value (a trick I use to print a specific div on the page). Obviously I restore the event handlers, as they have been obliterated. The highlighting still works, except now the one that was highlighted remains highlighted when I click another one. Phew, some description... Maybe someone can try out my code which I pared down to the absolute minimum. After loading, click on a drink to highlight it. Then press the "fubar" button which does the THING. Now click another item and bingo, two items are highlighted. I really have no clue why this should be. Any ideas would be much appreciated.

HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.selected { color : red;    font-weight: bold }
.normal   { color : black;  font-weight: normal }
</style>

<script>
var selected;

function fubar()
{
    document.body.innerHTML = document.body.innerHTML;
    addEventHandlers();
}

function select(item)
{
    if ( selected != null )
        selected.className = "normal";

    selected = item;
    selected.className = "selected";
}

function addEventHandlers()
{
    for (let li of document.getElementsByTagName('li'))
        li.addEventListener('click', function() { select(this); });
}

function init()
{
    document.getElementById("ul").appendChild(document.createElement("li")).innerHTML = "Coffee";
    document.getElementById("ul").appendChild(document.createElement("li")).innerHTML = "Tea";
    document.getElementById("ul").appendChild(document.createElement("li")).innerHTML = "Milk";

    addEventHandlers();
    select(ul.firstChild);
}

</script>
</head>

<body onload="init()">
<ul id="ul"></ul>
<button onclick="fubar()">fubar</button>
</body>
</html>
 
On my web page I have a table or list that is populated dynamically. The rows/items have an onclick() handler so that when I click on one it gets highlighted (and the one previously highlighted gets un-highlighted). This works perfectly fine, UNTIL I temporarily change the document body html and replace it back to its original value (a trick I use to print a specific div on the page). Obviously I restore the event handlers, as they have been obliterated. The highlighting still works, except now the one that was highlighted remains highlighted when I click another one. Phew, some description... Maybe someone can try out my code which I pared down to the absolute minimum. After loading, click on a drink to highlight it. Then press the "fubar" button which does the THING. Now click another item and bingo, two items are highlighted. I really have no clue why this should be. Any ideas would be much appreciated.

HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.selected { color : red;    font-weight: bold }
.normal   { color : black;  font-weight: normal }
</style>

<script>
var selected;

function fubar()
{
    document.body.innerHTML = document.body.innerHTML;
    addEventHandlers();
}

function select(item)
{
    if ( selected != null )
        selected.className = "normal";

    selected = item;
    selected.className = "selected";
}

function addEventHandlers()
{
    for (let li of document.getElementsByTagName('li'))
        li.addEventListener('click', function() { select(this); });
}

function init()
{
    document.getElementById("ul").appendChild(document.createElement("li")).innerHTML = "Coffee";
    document.getElementById("ul").appendChild(document.createElement("li")).innerHTML = "Tea";
    document.getElementById("ul").appendChild(document.createElement("li")).innerHTML = "Milk";

    addEventHandlers();
    select(ul.firstChild);
}

</script>
</head>

<body onload="init()">
<ul id="ul"></ul>
<button onclick="fubar()">fubar</button>
</body>
</html>
Hey,
So I just tested out your code and noticed a few things:
1) works fine prior to clicking the button
2) once you click on the button, yes two items do seem to be highlighted.
3) when you click on the the item with the persistent highlight, things go back to normal


Suggestions:
As a rule of thumb, you want to make sure you remove the `selected` class from any elements that may have it before adding it to another element. This ensures that there is only one element with the `selected` class at any given time. Next, you may want to add some styling to show that those list items are clickable...better user experience.
 
Hey,
So I just tested out your code and noticed a few things:
1) works fine prior to clicking the button
2) once you click on the button, yes two items do seem to be highlighted.
3) when you click on the the item with the persistent highlight, things go back to normal


Suggestions:
As a rule of thumb, you want to make sure you remove the `selected` class from any elements that may have it before adding it to another element. This ensures that there is only one element with the `selected` class at any given time. Next, you may want to add some styling to show that those list items are clickable...better user experience.
Thanks for trying it out ! Yes I had noticed point 3 but did not mention it. If you look at the select() function you see that I do remove the selected class from the highlighted item before adding it to the clicked element. And this works just fine, only gets a little wonky after fiddling with document.body.innerHTML. I can probably work around it somehow but I'd like to understand the issue here.

Johna is right - this is not my actual code of course, it's heavily watered down just to show the issue and nothing else.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom