Javascript - set div display on click - ClassName not defined

Question

I am trying to use the following function to change whether a div is shown or not, by clicking an image.

function showTxt(elementClass, nr) {
    "use strict";
    if (document.getElementByClassName(elementClass)[nr].style.display === "none") {
        document.getElementByClassName(elementClass)[nr].style.display = "block";
    } else {
        document.getElementByClassName(elementClass)[nr].style.display = "none";
    }
}

.employees{
    width: 80%;
    margin-left: 10%;
}

.employee{
    width: 20%;
    display: inline-block;
    margin-left: 5%;
    vertical-align: top;
    margin-right: 5%;
}

.employee_img img{
    width: 100%;    
}

.employee_txt{
    display: none;
}

<div class="employees">
          
        <div class="employee">
            <div class="employee_img">
              <img src="resources/katerina.jpg" alt="katerina">
            </div>
            <div class="employee_txt" id="katerina"></div>
        </div> 
        
        <div class="employee">
            <div class="employee_img">
              <img src="resources/sindre.jpg" alt="sindre">
            </div>
            <div class="employee_txt" id="sindre"></div>
        </div> 
        
        <div class="employee">
            <div class="employee_img"  onclick="showTxt(employee_txt, 2)">
              <img src="resources/daniel.jpg" alt="daniel">
            </div>
        
            <div class="employee_txt" id="daniel">
              <p>this is me</p>
            </div>
        </div> 
        
	</div>

Stack's snippet tool shows the message: "Uncaught ReferenceError: employee_txt is not defined". And I have noe idea why.

Any help is appreciated.

because it is not defined.... You have a varaible reference, not a string — epascarello
– epascarello, Commented Jan 20, 2017 at 16:23

Tim Barnett · Accepted Answer · 2017-01-20 16:25:58Z

A couple of things are wrong, it's getElementsByClassName, Elements being plural, and you need quotes around the string you're passing in your function call.

function showTxt(elementClass, nr) {
    "use strict";
    if (document.getElementsByClassName(elementClass)[nr].style.display === "none") {
        document.getElementsByClassName(elementClass)[nr].style.display = "block";
    } else {
        document.getElementsByClassName(elementClass)[nr].style.display = "none";
    }
}

.employees{
    width: 80%;
    margin-left: 10%;
}

.employee{
    width: 20%;
    display: inline-block;
    margin-left: 5%;
    vertical-align: top;
    margin-right: 5%;
}

.employee_img img{
    width: 100%;    
}

.employee_txt{
    display: none;
}

<div class="employees">
  
	<div class="employee">
		<div class="employee_img">
		  <img src="resources/katerina.jpg" alt="katerina">
		</div>
		<div class="employee_txt" id="katerina"></div>
	</div> 

	<div class="employee">
		<div class="employee_img">
		  <img src="resources/sindre.jpg" alt="sindre">
		</div>
		<div class="employee_txt" id="sindre"></div>
	</div> 

	<div class="employee">
		<div class="employee_img"  onclick="showTxt('employee_txt', 2)">
		  <img src="resources/daniel.jpg" alt="daniel">
		</div>

		<div class="employee_txt" id="daniel" style="display:none;">
		  <p>this is me</p>
		</div>
	</div> 

</div>

epascarello · Accepted Answer · 2017-01-20 16:24:39Z

1

Your code

onclick="showTxt(employee_txt, 2)"

It is looking for the variable employee_txt not a string.

onclick="showTxt('employee_txt', 2)"

answered Jan 20, 2017 at 16:24

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Alexander Antyneskul · Accepted Answer · 2017-01-20 16:25:05Z

0

You have to call it

<div class="employee_img"  onclick="showTxt('employee_tx', 2)">
              <img src="resources/daniel.jpg" alt="daniel">
</div>

answered Jan 20, 2017 at 16:25

Alexander Antyneskul

113 bronze badges

Comments

Michael Ritter · Accepted Answer · 2017-01-20 16:29:19Z

0

You need to use the function reference of showTxt instead of calling the function and assigning its result to the onClick handler.

To do so, use this:

onClick="showTxt.bind(showTxt, 'employee_txt', 2)"

This will return a new function that already has the 2 parameters bound to it so it can just be called as func().

I would also suggest you to use a variable inside of your showTxt function to store the result of the getElementsByClassName(classname)[index] call.

answered Jan 20, 2017 at 16:29

Michael Ritter

6404 silver badges10 bronze badges

Collectives™ on Stack Overflow

Javascript - set div display on click - ClassName not defined

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related