I saw a few similar topics which did help but I have specific problem and didn't manage to solve it alone so if anyone can help out I would appreciate it
I want to add onclick event to a div element.
HTML:
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')"></div>
JavaScript:
function klikaj(i)
{
document.getElementById(i).style.visibility='visible';
}
Wanted result: div with id="rad1" (which is hidden) turns visible, when clicked on div with id="thumb0".
This works when I add it to a button element but don't know how it goes with div elements.
5 Answers
I'm not sure what the problem is; running the below works as expected:
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">knock knock</div>
<div id="rad1" style="visibility: hidden">hello world</div>
<script>
function klikaj(i) {
document.getElementById(i).style.visibility='visible';
}
</script>
See also:
maybe your script tab has some problem.
if you set type, must type="application/javascript".
<!DOCTYPE html>
<html>
<head>
<title>
Hello
</title>
</head>
<body>
<div onclick="showMsg('Hello')">
Click me show message
</div>
<script type="application/javascript">
function showMsg(item) {
alert(item);
}
</script>
</body>
</html>
Depends in how you are hiding your div, diplay=none is different of visibility=hidden and the opacity=0
Visibility then use
...style.visibility='visible'Display then use
...style.display='block'(or others depends how
you setup ur css, inline, inline-block, flex...)Opacity then use
...style.opacity='1';
I think You are using //--style="display:none"--// for hiding the div.
Use this code:
<script>
function klikaj(i) {
document.getElementById(i).style.display = 'block';
}
</script>
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">Click Me..!</div>
<div id="rad1" class="thumbs" style="display:none">Helloooooo</div>
Its possible, we can specify onclick event in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="thumb0" class="thumbs" onclick="fun1('rad1')" style="height:250px; width:100%; background-color:yellow;";></div>
<div id="rad1" style="height:250px; width:100%;background-color:red;" onclick="fun2('thumb0')">hello world</div>
<script>
function fun1(i) {
document.getElementById(i).style.visibility='hidden';
}
function fun2(i) {
document.getElementById(i).style.visibility='hidden';
}
</script>
</body>
</html>
