Een onclick-gebeurtenis toevoegen aan een div-element

Ik heb een paar vergelijkbare onderwerpen gezien die wel hebben geholpen, maar ik heb een specifiek probleem en heb het niet alleen kunnen oplossen, dus als iemand kan helpen, zou ik het op prijs stellen

Ik wil een onclick-gebeurtenis toevoegen aan een div-element.

HTML:

<div id="thumb0" class="thumbs" onclick="klikaj('rad1')"></div>

JavaScript:

function klikaj(i)
{
    document.getElementById(i).style.visibility='visible';
}

Gewenst resultaat: div met id="rad1" (die verborgen is) wordt zichtbaar wanneer op div wordt geklikt met id="thumb0".

Dit werkt als ik het aan een knopelement toevoeg, maar niet weet hoe het met div-elementen gaat.


Antwoord 1, autoriteit 100%

Ik weet niet zeker wat het probleem is; het uitvoeren van het onderstaande werkt zoals verwacht:

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

Zie ook: http://jsfiddle.net/5tD4P/


Antwoord 2, autoriteit 13%

misschien heeft uw scripttabblad een probleem.

als u type instelt, moet u 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>

Antwoord 3, autoriteit 4%

Afhankelijk van hoe je je div verbergt, is diplay=none anders dan visibility=hidden en de opacity=0

  • Zichtbaarheid gebruik dan ...style.visibility='visible'

  • Weergeven en gebruik ...style.display='block' (of andere, hangt af van hoe
    je stelt je css, inline, inline-block, flex…)

  • Dekking gebruik dan ...style.opacity='1';


Antwoord 4

Ik denk dat je //--style="display:none"--// gebruikt om de div te verbergen.

Gebruik deze 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>

Antwoord 5

Het is mogelijk, we kunnen een onclick-gebeurtenis specificeren 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>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

twenty − 16 =

Other episodes