javascript - 获取 <a> 链接的值？

Question

我在从链接中提取值时遇到问题。这是一个 CSS 格式的页面，我真的更喜欢使用 <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>可以有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=" 更合适。使用 <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>