Javascript adding a class to an element using the value from an onClick event

Question

I have been trawling around all day trying to fix this issue I am sure it is simple but I will be darned if I can figure it out.

I have tried the archive and cannot seem to find the solution to my particular issue, so any help will be very gratefully received!

I am wanting to add a style to an individual element when a list item is clicked. The list Item Id's and associated div classes are created dynamically in my php code.

With my script I have got as far as getting an alert box appearing as a test to show that the onclick event attached to the list item is returning the correct value. In this case ID and class "1995"

However when I add the correctly returned value into my script using

document.getElementsByClassName(supplyClass).style.display = "none";

In the console I get

"Uncaught ReferenceError: reply_click is not defined"

Abridged code is below with the succesful alert line commented out.

function reply_click(supplyClass) {
    //alert(supplyClass);
    document.getElementsByClassName(supplyClass).style.display = "none";
}

<div class="supply-container">
    <div class="supply-menu">
        <ul>
            <li id="1995" onClick="reply_click(this.id)">Desking Systems</li>
        </ul>
    <div>
    <div class="supply-content-container">
        <div class="1995 supply-content" >
                    <p>LorumIpsum</p>
        </div>
    </div>            
</div>

`document.getElementsByClassName(supplyClass).style.display` cannot work since `getElementsByClassName` returns a **list** of elements. However, the error means that `reply_click` is not defined, which could be the case if you have a syntax error in your function. The line itself us syntactically valid, so it might be somewhere else in the code that you didn't post. — Felix Kling, May 11 '18 at 18:34
Also reply_click(this.id) will return 1995 instead of classname — sumeet kumar, May 11 '18 at 18:36
You should use `document.querySelector('.' + supplyClass).style.display = 'none';`, but that's unrelated to the error you are getting. — Felix Kling, May 11 '18 at 18:38
@FelixKling I think that will throw an error in this case since they are using a class name starting with a number. But that's a different issue too. — Mark, May 11 '18 at 18:49
@Mark_M I think you are right: https://stackoverflow.com/questions/4089006/can-xhtml-and-html-class-attributes-value-start-with-a-number — Calvin Nunes, May 11 '18 at 19:10
Thanks for the answers everyone. I didn't realise you cannot start a class name with an integer have something to work on will hopefully post an answer shortly .... — Surfing Nomad, May 12 '18 at 07:41

score 0 · Accepted Answer · answered May 11 '18 at 18:35

0

As your event handler is passing id of clicked element you need to use document.getElementById to find the element and make the display to none as below

    function reply_click(supplyClass)
{
    alert(supplyClass);
    //document.getElementsByClassName(supplyClass).style.display = "none";
    document.getElementById(supplyClass).style.display = "none";
}

<div class="supply-container">
    <div class="supply-menu">
        <ul>
            <li id="1995" onClick="reply_click(this.id)">Desking Systems</li>
        </ul>
    <div>
    <div class="supply-content-container">
        <div class="1995 supply-content" >
                    <p>LorumIpsum</p>
        </div>
    </div>            
</div>

answered May 11 '18 at 18:35

sumeet kumar

2,628
1
16
24

Pretty sure the OP wants to find the element with *class* `1995`. – Felix Kling May 11 '18 at 18:37
@FelixKling i agree but as he has explicit id set for the ul element as well so i wasn't 100% sure – sumeet kumar May 11 '18 at 18:38
You are correct Felix and thanks both for your help. – Surfing Nomad May 12 '18 at 07:43

score 0 · Answer 2 · answered May 11 '18 at 18:37

document.getElementsByClassName(supplyClass) returns list of elements so you can't set its style directly.

If you want to set style for all elements returned this way then you can do it like this.

const els = document.getElementsByClassName(someClass);

for (let i = 0; i < els.length; i++) {
  els[i].style.display = 'none';
}

score 0 · Answer 3 · answered May 14 '18 at 11:30

Thanks Felix & Sumeet The line of correct code that worked is as follows.

document.querySelector('.supply-' + supplyClass).style.display = 'none';

I had not realised you cannot start a class name with an integer so appended the word supply with a hyphen to the supplyClass value and it worked fine.

Thanks again.

Javascript adding a class to an element using the value from an onClick event

3 Answers3