PHPを介して文字列としてMySQLデータをJavaScriptに渡す

Question

私はソーシャルメディアサイトを作成しようとしています。 4行目のonclick='func_cmnt_open(".$row['post_ID'].")には、各エントリに固有のdivが表示されます。それは構文エラーのように思えるが、私はそれを絞り込むことができないPHPやjavascriptの場合。

6行目では、id属性がcomment".$row['post_ID']."に設定されているため、各divがwhileループ反復から一意になりました。

if (mysqli_num_rows($result) > 0) { 
    while($row = mysqli_fetch_assoc($result)) { 
     echo "<h4>".$row["username"]." said ".$row["cm_text"]." at ".$row["time"]." comment".$row['post_ID']."</h4>"; 
     echo "<button class='w3-button w3-teal w3-xlarge' onclick='func_cmnt_open(".$row['post_ID'].")'>&#9776;</button>"; 
     echo "<button class='w3-button w3-teal w3-xlarge' onclick='func_like()' id='like'>&#9776;</button>"; 
     echo "<div class='w3-black' id='comment".$row['post_ID']."' style='display: none'>"; 
     echo " <div class='w3-container''>"; 
     echo " <h4>"; 
     echo "  ///code was here "; 
     echo " </h4>"; 
     echo " <button class='w3-button w3-grey w3-xlarge' onclick='document.getElementById('id02').style.display='block''>&#9776;</button>"; 
     echo "  <div id='id02' class='w3-modal'>"; 
     echo "   <div class='w3-modal-content w3-card-4'>"; 
     echo "    <header class='w3-container w3-teal'> "; 
     echo "    <span onclick='document.getElementById('id02').style.display='none'' class='w3-button w3-display-topright'>&times;</span>"; 
     echo "    ///code was here"; 
     echo "    </header>"; 
     echo "     <div class='w3-container'>"; 
     echo "      <form class='w3-container' action='home.php' method='GET'>"; 
     echo "      <p><input type='text' class='w3-input' name='post_comment' placeholder='Whats happening there...'/></p>"; 
     echo "      <p><button class='w3-button w3-black'>Post</button></p>"; 
     echo "      </form>"; 
     echo "     </div>"; 
     echo "     <footer class='w3-container w3-teal'>"; 
     echo "     <p>nothing here</p>"; 
     echo "     </footer>"; 
     echo "   </div>"; 
     echo "  </div>"; 
     echo " </div>"; 
     echo "</div>"; 
    } 
    } 

JAVASCRIPT：私がdiv要素の一意のIDを取得するには、「コメント」や「NUM」を結合するために、文字列の連結を使用してみました 。それはどちらもうまくいかなかった。

function func_cmnt_open(num) { 

if (document.getElementById('comment'+num.tostring()).style.display == "none") 
{ 
    document.getElementById('comment'+num.tostring()).style.width = "100%"; 
    document.getElementById('comment'+num.tostring()).style.display = "block"; 
} 
else 
{ 
    document.getElementById('comment'+num.tostring()).style.width = "0%"; 
    document.getElementById('comment'+num.tostring()).style.display = "none"; 
} 
} 

OUTPUT：the selected button should invoke the javascript with arguments from PHP code and display a black div where i can enter comments

私はこれのわからないんだけど、それを行うための最も効率的な方法です。同じ出力を達成するための他の方法がある場合はアドバイスをお願いします。

Answer 1

post_IDが厳密に文字列でない場合は、Javascriptで構文エラーが発生します。

... onclick='func_cmnt_open(".$row['post_ID'].")'... 

この値を考慮する1上記はページのソースコードで作成されます。それはあなたがエスケープする必要がありますエコーしている方法でPHPのそれを得るために

... onclick='func_cmnt_open("$row['post_ID']")'... 

あるべき第2のケースで

... onclick='func_cmnt_open(1)'... 

今、この値を考慮post1

... onclick='func_cmnt_open(post1)'... 

二重引用符または属性の'も問題を引き起こします。したがって、このように：

... onclick='func_cmnt_open(\"".$row['post_ID']."\")'... 

他のいくつかの引用問題onclick='document.getElementById('id02').style.display='block'' ..>がありました、私はそれらすべてを得たかどうかを知りませんが、良いはずです。

if (mysqli_num_rows($result) > 0) { 
    while($row = mysqli_fetch_assoc($result)) { 
     echo "<h4>{$row["username"]} said {$row["cm_text"]} at {$row["time"]} comment{$row['post_ID']}</h4> 
      <button class='w3-button w3-teal w3-xlarge' onclick='func_cmnt_open(\"{$row['post_ID']}\")'>&#9776;</button> 
      <button class='w3-button w3-teal w3-xlarge' onclick='func_like()' id='like'>&#9776;</button> 
      <div class='w3-black' id='comment{$row['post_ID']}' style='display: none'> 
       <div class='w3-container''> 
       <h4> 
        ///code was here  
       </h4> 
       <button class='w3-button w3-grey w3-xlarge' onclick='document.getElementById(\"id02\").style.display=\"block\"'>&#9776;</button> 
        <div id='id02' class='w3-modal'> 
         <div class='w3-modal-content w3-card-4'> 
          <header class='w3-container w3-teal'> 
          <span onclick='document.getElementById(\"id02\").style.display=\"none\"' class='w3-button w3-display-topright'>&times;</span> 
          ///code was here 
          </header> 
           <div class='w3-container'> 
            <form class='w3-container' action='home.php' method='GET'> 
            <p><input type='text' class='w3-input' name='post_comment' placeholder='Whats happening there...'/></p> 
            <p><button class='w3-button w3-black'>Post</button></p> 
            </form> 
           </div> 
           <footer class='w3-container w3-teal'> 
           <p>nothing here</p> 
           </footer> 
         </div> 
        </div> 
       </div> 
      </div>"; 
    } 
}