Question

希望标题符合我的问题。

我循环显示了表中的数据，并显示为按钮。

<?php
$a=0;
while($row = mysql_fetch_assoc($execute)){
    $ID = $row['id'];
    $name[] = $row['names'];
    echo "<button name=\"btn$ID\" class='btnName' onClick='showForm()'>$name[$a]</button>";
    $a++;
}

<div id="result" style="display: none;">
    //name from clicked buttons should be displayed here
</div>
?>

这是函数：

<script type="application/javascript">
    function showForm(){
        document.getElementById('result').style.display="block";
    }
</script>

“ id”字段只是一个递增字段。如果单击按钮，则要在结果div中显示我从这些按钮之一中单击的名称。

我怎么称呼它？

Answer 1

将您的功能更改为这样

 function showForm(elem){
    document.getElementById('result').innerHTML = elem.innerHTML;
    document.getElementById('result').style.display="block";
}

并这样称呼

onClick='showForm(this)'

Answer 2

不确定我是否正确理解了您的问题，但如果确实理解了，请尝试下面的功能。

function showForm(ev) {
  // Or if you want to get the text of the button change it to ev.target.innerText
  const name = ev.target.getAttribute("name"); 

  const result = document.getElementById('result');

  result.innerText = name;
  result.style.display = 'block';
}

Answer 3

您可以尝试以下方法，看看它如何为您工作：

<?php
while($row = mysql_fetch_assoc($execute)){
    echo "<button name=\"btn{$row['id']}\" class='btnName' onClick=\"showForm('{$row['name']}')\">{$row['names']}</button>";
}
?>

<div id="result"></div>

<script>
function showForm(name) {
    document.getElementById('result').innerText = name;
}
</script>

Answer 4

将您的代码更新为此：

echo '<button name="btn'.$ID.'" class="btnName" onClick="showForm()" data-name="'.$name[$a].'">'.$name[$a].'</button>';

然后将您的JS更改为此：

function showForm(e) {
  var name = e.target.getAttribute("data-name");
  var result = document.getElementById('result');

  result.innerText = name;
  result.style.display = 'block';
}

Answer 5

显然您的代码应该是

<?php
 $a=0;
 while($row = mysql_fetch_assoc($execute)){
  $ID = $row['id'];
  $name[] = $row['names'];
  echo "<button name='btn{$ID}' class='btnName' onClick=showForm('{$name[$a]}')>{$name[$a]}.    </button>";
  $a++;
 }
?>

<div id="result" style="display: none;">
</div>


<script type="application/javascript">
 function showForm(value){
    let div = document.getElementById('result');
    div.style.display="block";
    div.innerText = value;
 }
</script>

Answer 6

javascript部分

function showForm() {    
  var x = document.getElementsByClassName('btnName')
  for(var i = 0; i< x.length; i++){
    x[i].addEventListener("click", function(e){
    result.innerHTML = e.target.getAttribute("name")
    })
  }
}
showForm()

<button name="Button1" class='btnName'>Button1</button>
<button name="Button2" class='btnName'>Button2</button>
<button name="Button3" class='btnName'>Button3</button>
<button name="Button4" class='btnName'>Button4</button>

<div id="result" ></div>

使用从循环数组创建的按钮调用数据

6 个答案: