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
– Felix Kling, Commented May 11, 2018 at 18:34
Also reply_click(this.id) will return 1995 instead of classname — sumeet kumar
– sumeet kumar, Commented May 11, 2018 at 18:36
You should use document.querySelector('.' + supplyClass).style.display = 'none';, but that's unrelated to the error you are getting. — Felix Kling
– Felix Kling, Commented May 11, 2018 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
– Mark, Commented May 11, 2018 at 18:49
@Mark_M I think you are right: stackoverflow.com/questions/4089006/… — Calvin Nunes
– Calvin Nunes, Commented May 11, 2018 at 19:10

sumeet kumar · Accepted Answer · 2018-05-11 18:35:10Z

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, 2018 at 18:35

sumeet kumar

2,6541 gold badge18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Felix Kling Over a year ago

Pretty sure the OP wants to find the element with class 1995.

sumeet kumar Over a year ago

@FelixKling i agree but as he has explicit id set for the ul element as well so i wasn't 100% sure

Surfing Nomad Over a year ago

You are correct Felix and thanks both for your help.

Matus Dubrava · Accepted Answer · 2018-05-11 18:37:26Z

0

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';
}

answered May 11, 2018 at 18:37

Matus Dubrava

14.6k3 gold badges44 silver badges60 bronze badges

Comments

Surfing Nomad · Accepted Answer · 2018-05-14 11:30:34Z

0

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.

answered May 14, 2018 at 11:30

Surfing Nomad

234 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related