获取 <a> 链接的价值？

Question

我在从链接中提取价值时遇到了麻烦。这是一个 CSS 格式的页面，我真的更喜欢使用 a 而<a>不是<button>.

<button value="1" onclick="showDetails(this.value)">This works</button>
<a value="2" onclick="showDetails(this.value)">This doesn't work</a>

};
        xmlhttp.open("GET","getdetails.php?q="+str,true);
        xmlhttp.send();

我怎样才能获得<a>点击它的价值而不是让它去某个地方？

Answer 1

只有少数几个元素，如<input>s、<textarea>s 和<button>s 可以具有value属性：

console.log(
  document.querySelector('a').value
);

<a value="val">a</a>

如果必须使用该value属性，请使用该getAttribute方法而不是点表示法：

console.log(
  document.querySelector('a').getAttribute('value')
);

<a value="val">a</a>

另一种选择是改用数据属性，这在使用value="s 时比s更合适<a>：

console.log(
  document.querySelector('a').dataset.value
);

<a data-value="val">a</a>

（如果可能的话，还要确保使用 Javascript 正确附加您的事件处理程序 - 内联处理程序通常被认为是非常糟糕的做法 - 尝试使用addEventListener）

要使用addEventListener，请选择您的a，然后调用addEventListener它。例如，如果你<a>有一个id的details：

const details = document.querySelector('#details');
details.addEventListener('click', () => {
  showDetails(details.dataset.value);
});

function showDetails(str) {
  console.log('showing details for ' + str);
}

<a id="details" data-value="thevalue">click for details</a>