How can I send a different ID as a parameter for a JS function?
Question
I'm trying to send an id to a function but I don't know how to do it. I have a my function like this
function showHide(item) {
if (document.getElementById('item.id').style.display=='none') {
document.getElementBydId('item.id').style.display = '';
}
else {
document.getElementById('item.id').style.display = 'none';
}
}
and my HTML like this
<div onclick="showHide(one);">
<img src="images/1.png">
</div>
<div id="one" style="display:none">
<h1>X List</h1>
<ul>
<li>Elmt 1</li>
<li>Elmt 2</li>
<li>Elmt 3</li>
<li>Elmt 4</li>
</ul>
</div>
But, I have more divs with diferent id's, so I don't want to create more functions for each id. How can I send the "one, two, three,..." id to another onclick div?
5 answers
solution1
1 2014-11-15 21:15:48
html:
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="visibility" id="one">
<img src="images/1.png">
</div>
<div id="match-one">
<h1>X List</h1>
<ul>
<li>Elmt 1</li>
<li>Elmt 2</li>
<li>Elmt 3</li>
<li>Elmt 4</li>
</ul>
</div>
</body>
</html>
JavaScript:
(function () {
var hasClass = function (ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
},
removeClass = function (ele, cls) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
},
showHide = function (item) {
var element = document.getElementById('match-' + this.id);
if(hasClass(element, 'hide')) {
removeClass(element, 'hide');
} else {
element.className = element.className + 'hide';
}
},
cell = document.querySelectorAll('.visibility'),
i;
for(i = cell.length - 1; i >= 0; i--) {
cell[i].addEventListener('click', showHide, false);
}
}());
css:
.hide {
display: none;
}
I chose this solution because is very scalable and it doesn't override css
solution2
0 2014-11-15 20:41:10
Try
<div onclick="showHide('one');">
function showHide(item) {
var el = document.getElementById(item);
if (el.style.display === 'none') {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
solution3
0 2014-11-15 20:43:56
You're quoting in wrong place and You have a typo in 3rd line. Change Your code on this:
JavaScript:
function showHide(id) {
if (document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display = '';
}
else {
document.getElementById(id).style.display = 'none';
}
}
HTML:
<div onclick="showHide('one');">
And, for the record, use jQuery library. It is very useful and easier than using only JavaScript. Thanks to it, Your JavaScript code would look like this:
function showHide(id) {
if ($('#'+id).is(':hidden')) {
$('#'+id).show();
}
else {
$('#'+id).hide();
}
}
solution4
0 2014-11-15 20:45:43
Some syntax edits to your code, this ShowHide function should work with any ID you pass it. Just be sure you pass the ID as a string
<div onclick="showHide('one');"> // Added quotes here
<img src="images/1.png" />
</div>
<div id="one" style="display:none">
<h1>X List</h1>
<ul>
<li>Elmt 1</li>
<li>Elmt 2</li>
<li>Elmt 3</li>
<li>Elmt 4</li>
</ul>
</div>
function showHide(item) {
if (document.getElementById(item).style.display=='none') { // Use the ID (a string) to get the element
document.getElementBydId(item).style.display = '';
}
else {
document.getElementById(item).style.display = 'none';
}
};
solution5
0 2014-11-15 20:47:31
you had also some typos like BydId ... try this http://jsfiddle.net/nphLvn3j/
function showHide(item) {
if (document.getElementById(item).style.display=='none') {
document.getElementById(item).style.display = 'block';
}
else {
document.getElementById(item).style.display = 'none';
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.