'<a>`의 속성을 전달하려면

Question

<a> 태그로 value 또는 id을 가져 와서 JavaScript 기능 내에서 사용하려고합니다.

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>"; 

:

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

내가 얻을 기대 value "2"와 id "2".

다른 프로젝트에서 같은 코드를 시도했지만 작동하지만이 경우 전혀 작동하지 않습니다. 콘솔에 "undefined"를 반환합니다.

무슨 일입니까?

Answer 1

<a> element에는 value 속성이 없습니다. 이는 잘못된 HTML입니다. 양식 입력란은 value입니다. 맞춤 data- attribute (아래 참조)을 설정하고 element.dataset 속성을 사용하여 JavaScript에 액세스 할 수 있습니다.

또한 숫자로 시작하는 id의 요소를 제공하는 것이 타당하지만 이제는 혼동을 일으킬 수 있으므로 줄을내어 놓는 것이 좋습니다.

다음으로 링크를 클릭 할 때 일부 자바 스크립트를 실행하는 기술로 자바 스크립트 (예 : href="javascript:...")를 삽입하는 데 href 속성을 사용하지 말고 약 20 년이되었으며 구형입니다. 사용자에게 클릭 할 항목을 지정하고 탐색을 유발하지 않으려면 <a>을 사용하지 마십시오. 화면 판독기가 혼란 스럽기 때문에 기본 click 동작을 취소해야합니다. 이는 의미 상 올바르지 않습니다. . 거의 모든 HTML 요소가 click 이벤트를 지원하며 하이퍼 링크처럼 보이도록 스타일을 지정할 수 있습니다.

또한 자바 스크립트에서 HTML을 분리하여 최신 표준 및 모범 사례를 따르십시오. 모든 작업은 작업하려는 요소에 대한 JavaScript 참조를 가져 오기 시작합니다. 을 원하는 부분을 추출하거나 수정할 수 있으므로 실제로 데이터를 "전달"할 필요가 없습니다. 함수로서의 함수는 이미 이벤트 함수가 호출 된 요소에 "바인드"되어 있으므로 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; }

<div id="two" data-value="2" class="clickable">cpp</div>