最初のクリックでOnclick javascript関数が機能しない

"p"要素をクリックしてdivを表示/非表示するコードを書きましたが、最初は何も起こりません。
2回目のクリックからのみ、コードは期待通りに機能します。私はいくつかの同様の質問を読んできました。おそらくそれはスタイルの問題であると私は理解しました。
私はスタイルを変えようとしましたが（私がやっていることを本当に知らなくても）、私は運が良かったわけではありません。最初のクリックでOnclick javascript関数が機能しない

また、 "p"要素は入力をカバーすることがあり、divの右下に、他のすべての要素の下にある方法を理解できませんでした。

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

出典

2017-11-17 genespos

cssesスタイルをチェックしているwindow.getComputedStyle(SubSH);を使用することにより

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

のために - あなたの機能ビットを変更してみてください。そして、1つで2つの質問をしないでください。生のページではないページをダンプする代わりに、前もって混乱を取り除いてください。 [質問する方法]（https://stackoverflow.com/help/mcve）を参照してください。 –

else文はありますが、一致するif文はありませんか？ – HaukurHaf

PHPの部分を破棄して、そのPHPスクリプトの出力を入力してください – Pratansyah

あなたがSubSH.style.displayを行うときに宿<your-tag style='...'/>あるだけinline styleので、何かをチェックしているしていることを

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

出典

2017-11-17 08:45:35

私はどこが間違っているのか説明できますか？ – genespos

したがって、2つの問題がありました ** ** style **プロパティはインラインスタイルのみを提供します。 ** cssスタイル** + **インラインスタイル**が必要な場合は、** window.getComputedStyle（）** を使用する必要があります。** ** p **タグは、下に移動してCSSを変更する必要があります右下にスティックするスタイル。 –

事以下の作業のコードを見つけることができますが、それので、あなたのスタイルシートでそれを持ってしてくださいこのメソッドではアクセスできません。すべてのあなたのクラスを認識しており、このコードは、構文的に正しくありません

出典

2017-11-17 08:45:55 pilczuk

最初のクリックでOnclick javascript関数が機能しない

答えて

関連する問題