Adding an onclick event to a div element

问题

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.

回答1:

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>

回答2:

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>

回答3:

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

回答4:

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>

回答5:

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>

来源：https://stackoverflow.com/questions/12945825/adding-an-onclick-event-to-a-div-element

标签

javascript

dom-events