Question

I am trying to get the value or id from an <a> tag and use it inside a JavaScript function.

function myFunction(qiizName, x) {
  val = 1;
  console.log("question number" + qiizName);
  console.log("number question" + x.value);
  console.log("number question" + x.id);
}

echo"<ul>";
echo "<li><a href='#home' class='active' >module</a></li>";

$i=0;
while ( $module_row = mysqli_fetch_array($module)) {
    $total=$module_row['total_question'];   
    $id=$module_row['id'];  

    echo '<li><a href="javascript:myFunction(1,this)" 
           id="'.$total.'" 
           value="'.$total.'">\''.$module_row['nom'].'\' </a></li>';

    $i++;
} 

echo "</ul>";

For example:

<a href="javascript:myFunction(1,this)" id="2" value="2">cpp</a>

I'd expect to get value "2" and id "2".

I tried the same code in another project and it works, but in this case it doesn't work at all. It returns "undefined" in the console.

What's going wrong?

Answer 1

<a> element 没有value属性，即HTML无效。只有表单字段具有value。您可以设置自定义 data- attribute （如下所示），并使用 element.dataset 属性在JavaScript中访问它。

此外，虽然现在有效的是给一个以数字开头的id元素，但这是不可取的，因为这会引起混淆并引发问题。

接下来，不要使用href属性来嵌入JavaScript（即href="javascript:..."），因为当点击链接时，启动一些JavaScript的技术大约有20年的历史，而且非常过时。如果你真的想给用户点击一些内容并且它不会导致导航，那么根本不要使用<a>因为它会混淆屏幕阅读器，你需要取消原生的{{1行为，它在语义上是不正确的。几乎每个HTML元素都支持click事件，并且可以设置为看起来像超链接。

此外，通过将HTML与JavaScript分离，遵循现代标准和最佳做法。这一切都始于获得对你想要使用的元素的JavaScript引用，从那里你可以提取或修改你想要的任何方面所以你真的不需要“通过”任何数据到您的函数，因为该函数已经“绑定”到导致调用事件函数的元素，您可以使用click对象引用获取所需的数据。

this

// Get a reference to the element you wish to work with:
var element = document.getElementById("two");

// Set up event handler in JavaScript, not in the href attribute of HTML
element.addEventListener("click", myFunction);

function myFunction() {
  // You have access to all of the element's attributes and child content
  // via the "this" object refence because the element that caused this 
  // function event handler to run gets bound to "this".
  console.log("ID is: " + this.id);
  console.log("data-value is: " + this.dataset.value);  
  console.log("Content is: " + this.textContent);  
}

.clickable { cursor:pointer; user-select:none; text-decoration:underline; }

从“<a>` to function

1 个答案: