ボタンをクリックしてボタンをクリックする別のタスクを実行する（HTML）

-1

私の設定ではダイナミックグリッドボックスがあり、各ボックスにボタンがあります..私の動機はonclickですoボタンはすべてのボタンが別のタスクを実行しますが私のコードでは、すべてのボタンが同様のタスクを実行します。あなたのIDと機能のパラメータで一意の値を渡す必要がありボタンをクリックしてボタンをクリックする別のタスクを実行する（HTML）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Digital Menu</title> 
    <meta name="description" content=""> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css"> 
<link rel="stylesheet" href="style1.css"> 

    <title>Page Title</title> 
    </head> 
    <body> 

<div class="banner"> 
    <div class="header"> 
<div class="header-inner container clear"> 
<a class="logo" href="#"><span class="sr">Lambda Logo</span></a>  
    <div class="navigation"> 
    <ul class="navigation-menu">   
     <li class="navigation-item"><a href="new_orders.php">New Orders</a> 
    </li> 
     <li class="navigation-item"><a href="#open_orders">Open Orders</a> 
    </li> 
     <li class="navigation-item"><a href="#complete_orders">Complete 
    Orders</a></li>   
    </ul>    
    </div> 
    <ul> 
    <h1>open orders</h1> 
    </ul>  
</div> 
</div> 


<?php 

    include("connect.php"); 
    $query="SELECT * FROM `orders`"; 
    $filter_Result=mysqli_query($con,$query); 
    while($row = mysqli_fetch_array($filter_Result)){ 




     echo "<div class='block'>"; 

     echo "<div class='boxed'>"; 

echo "<div id='container'>"; 


    echo "<td>" . $row['id'] . "</td>" ."<br>"; 
    echo "<td>" . $row['status'] . "</td>"."<br>"; 
    echo "<td>" . $row['created_date'] . "</td>"."<br>"; 
    echo "<td>" . $row['uid'] . "</td>"."<br>"."<br>"."<br>"."<br>"; 
    echo "<button class='button' style='vertical-align:middle' id='demo' 
    onclick='myFunction()'><span>click Me</span>"; 
echo "</button>"; 



echo "</div>"; 


     echo "</div>"; 

    echo "</div>"; 


    } 

     ?> 


    <script type="text/javascript"> 
    function myFunction() { 
    document.getElementById('demo').innerHTML = 'Hello World'; 
    } 
    </script> 


    </div> 
    </body> 
    </html>

出典

2016-05-23 techDigi

：と第二のものは、どのように私は今ここにボタンの動的なIDを生成することができることを私のコードです。このコードを参照してください。これにより、各ボタンに一意のIDが設定され、その一意のIDが関数のパラメーターとして運ばれます。したがって、この機能には、ID「Hello World」というメッセージが表示されます。あなたは各ボタンに異なるアクションを実行したい場合は

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Digital Menu</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="style1.css"> 
    <title>Page Title</title> 
</head> 
<body> 
<div class="banner"> 
    <div class="header"> 
    <div class="header-inner container clear"> 
     <a class="logo" href="#"><span class="sr">Lambda Logo</span></a>  
     <div class="navigation"> 
      <ul class="navigation-menu">   
      <li class="navigation-item"><a href="new_orders.php">New Orders</a></li> 
      <li class="navigation-item"><a href="#open_orders">Open Orders</a></li> 
      <li class="navigation-item"><a href="#complete_orders">Complete Orders</a></li>   
      </ul>    
     </div> 
     <ul><h1>open orders</h1></ul>  
    </div> 
    </div> 
<?php 
    include("connect.php"); 
    $query="SELECT * FROM `orders`"; 
    $filter_Result=mysqli_query($con,$query); 
    $div = ''; 

    while($row = mysqli_fetch_array($filter_Result)){ 
     $div .= "<div class='block'><div class='boxed'><div id='container'>"; 
     $div .= "<td>" . $row['id'] . "</td>" ."<br>"; 
     $div .= "<td>" . $row['status'] . "</td>"."<br>"; 
     $div .= "<td>" . $row['created_date'] . "</td>"."<br>"; 
     $div .= "<td>" . $row['uid'] . "</td>"."<br>"."<br>"."<br>"."<br>"; 
     $div .= "<button class='button' style='vertical-align:middle' id='demo" . $row['id'] . "' onclick='myFunction(\"" . $row['id'] . "\")'><span>click Me</span>"; 
     $div .= "</button></div></div></div>"; 
    } 

    echo $div; 
?> 
<script type="text/javascript"> 
    function myFunction(id) { 
    document.getElementById('demo').innerHTML = 'Hello World' + id; 
    } 
</script> 
</div> 
</body> 
</html>

さて、あなたは、関数で場合やスイッチ条件を使用して対応するアクションを書くことができます。例えばのために

：

function myFunction(id) { 
    if(id == 1) { 
    document.getElementById('demo').innerHTML = 'First Button clicked'; 
    } else if(id == 1) { 
    document.getElementById('demo').innerHTML = 'Second Button clicked'; 
    } 
}

出典

2016-05-23 11:10:34 Karthikeyani

ボタンをクリックしてボタンをクリックする別のタスクを実行する（HTML）

答えて

関連する問題