Onclick javascript function doesn't work on first click

Question

I've wrote a code to hide/show a div by clicking on a "p" element, but at first click nothing happens.
Only from 2nd click the code works as expected. I've read some similar questions and I've understood that it's probably a style problem.
So I've tried to change style (without really knowing what I was doing) but I wasn't lucky.

I've also another problem: the "p" element sometimes covers an input and I've not understood how to have it on the bottom right of the div but below every other element.

<!DOCTYPE html>
<html>
    <head>
        <style>
        .Class1 {
            position:relative;
            display: inline-block;
            width: 48%;
            margin: 3px;
            border: 3px solid #CCC;  
        }
        .Class2 {
            position:absolute;
            bottom:0;
            right:0;
            border: 1px solid #CCC;
            margin:1px;
            background: #FFC;
        } 
        .Fields {
            clear: both;
            border: 1px solid #CCC;
            display: inline-block;
            margin:3px;
        }
        .H_p {
            border: 1px solid #CCC;
            display: inline-block;
        }
        .Opt {
            border: 1px solid #CCC;
            display: none;
        }
        </style>
    </head>
    <body>
        <h2>My test</h2>
            <?php 
            $Divs = array('Div1'=>'Class1', 
                'Div2'=>'Class1', 
                'Div3'=>'Class1', 
                'Div4'=>'Class1', 
                'Div5'=>'Class1');
            $AskToShow=array("Field1"=>"1.1.1", "Field2"=>"1.2.1", "Field3"=>"1.3.1");
            foreach ($Divs as $Name=>$Class){
                echo '
                <div class="'.$Class.'">';
                echo $Name.'<br/>';
                foreach ($AskToShow as $I_Name=>$Id){
                    echo '
                        <label>'.$I_Name.'</label>
                            <input type="text" id="'.$Id.'" class="Fields"/>';
                }
                echo '
                    <p id="Btn_Opt'.$Name.'" class="Class2" >Mostra campi opzionali</p>';
                echo '
                        <div id=Opt'.$Name.' name="Opt'.$Name.'" class="Opt" >';
                foreach ($AskToShow as $H_Name=>$Id){
                    echo'
                            <p id="H_'.$Id.'" class="H_p">'.$H_Name.'</p>';
                }
                echo '
                        </div>';
                echo '
                </div>';
            }
            ?>
        <script>
    var MyClass = document.getElementsByClassName("Class2");

    var myFunction = function() {
        var SenderId = this.id;
        var SubId = SenderId.substring(SenderId.indexOf('_')+1)
        var SubSH = document.getElementById(SubId);
        if (SubSH.style.display == 'none'){
            SubSH.style.display = 'inline-block'; 
        }else{
            SubSH.style.display = 'none'; 
        }
    };
    for (var i = 0; i < MyClass.length; i++) {
        MyClass[i].addEventListener('click', myFunction, false);
    }
        </script>
    </body>
</html>

This code isn't syntactically correct. And please don't ask two questions in one, try to clean the mess before instead of dumping the raw not working page. See how to ask. — Denys Séguret
– Denys Séguret, Commented Nov 17, 2017 at 8:23
Please discard the php part and fill it with the output of that php script — Pratansyah
– Pratansyah, Commented Nov 17, 2017 at 8:25

pilczuk · Accepted Answer · 2017-11-17 08:45:55Z

2

The thing is that when you do SubSH.style.display you are checking only inline style so something which is inn <your-tag style='...'/> but you have it in your stylesheet so it is not accessible by this method. try to change your function a bit - for example

var myFunction = function() {
    var SenderId = this.id;
    var SubId = SenderId.substring(SenderId.indexOf('_')+1)
    var SubSH = document.getElementById(SubId);
    var style = window.getComputedStyle(SubSH);
    if (style.display == 'none'){
        SubSH.style.display = 'inline-block'; 
    }else{
        SubSH.style.display = 'none'; 
    }
};

by using window.getComputedStyle(SubSH); you are checking style which is aware of all your classes and csses

answered Nov 17, 2017 at 8:45

pilczuk

1961 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vipin Kumar · Accepted Answer · 2017-11-17 08:45:35Z

Please find the working code below

<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
    position:relative;
    display: inline-block;
    width: 48%;
    margin: 3px;
    border: 3px solid #CCC;  
}
.Class2 {
    position:relative;
    bottom:0;
    right:0;
    border: 1px solid #CCC;
    margin:1px;
    background: #FFC;
    display: inline-block;
    float:right;
} 
.Fields {
    clear: both;
    border: 1px solid #CCC;
    display: inline-block;
    margin:3px;
}
.H_p {
    border: 1px solid #CCC;
    display: inline-block;
}
.Opt {
    border: 1px solid #CCC;
    display: none;
}
</style>
</head>
<body>
<h2>My test</h2>
<?php
$Divs      = array(
    'Div1' => 'Class1',
    'Div2' => 'Class1',
    'Div3' => 'Class1',
    'Div4' => 'Class1',
    'Div5' => 'Class1'
);
$AskToShow = array(
    "Field1" => "1.1.1",
    "Field2" => "1.2.1",
    "Field3" => "1.3.1"
);
foreach ($Divs as $Name => $Class) {
    echo '
    <div class="' . $Class . '">';
    echo $Name . '<br/>';
    foreach ($AskToShow as $I_Name => $Id) {
        echo '
            <label>' . $I_Name . '</label>
                <input type="text" id="' . $Id . '" class="Fields"/>';
    }

    echo '
            <div id=Opt' . $Name . ' name="Opt' . $Name . '" class="Opt" >';
    foreach ($AskToShow as $H_Name => $Id) {
        echo '
                <p id="H_' . $Id . '" class="H_p">' . $H_Name . '</p>';
    }
    echo '
            </div>';
    echo '
        <div style="clear:both;"></div>';
    echo '
        <p id="Btn_Opt' . $Name . '" class="Class2" >Mostra campi opzionali</p>';
    echo '
    </div>';
}
?>
<script>
    var MyClass = document.getElementsByClassName("Class2");

    var myFunction = function() {
        var SenderId = this.id;
        var SubId = SenderId.substring(SenderId.indexOf('_')+1)
        var SubSH = document.getElementById(SubId);
        if (window.getComputedStyle(SubSH, null).display == 'none'){
                SubSH.style.display = 'inline-block'; 
        } else {
                SubSH.style.display = 'none'; 
        }
    };
    for (var i = 0; i < MyClass.length; i++) {
        MyClass[i].addEventListener('click', myFunction, false);
    }
</script>
</body>
</html>

So there were two problems 1. style property only gives you inline styles. If you want css styles + inline styles, then you have to use window.getComputedStyle() 2. p tag needs to moved at the bottom and changed the css styles a little bit to stick at bottom right.

Collectives™ on Stack Overflow

Onclick javascript function doesn't work on first click

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related