Question

I am having troubles pulling the value from a link. It's a CSS formatted page and I would really prefer to use a <a> than 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();

How can I get the value of <a> when it is clicked and not having it go somewhere?

Answer 1

只有少数几个元素，例如<input>，<textarea>和<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="时，它比<a>更合适：

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

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

（还要确保尽可能使用Java脚本正确附加事件处理程序-内联处理程序通常被认为是非常差的做法-尝试使用addEventListener）

要使用addEventListener，请选择您的a，然后在其上调用addEventListener。例如，如果您的<a>的{{1}}为id：

details

const details = document.querySelector('#details');
details.addEventListener('click', () => {
  showDetails(details.dataset.value);
});

function showDetails(str) {
  console.log('showing details for ' + str);
}

Answer 2

您可以编写Javascript函数以从链接中获取值，如下所示：

Future<CommissionTicket> commissionTicketFuture = CommissionTicket.create(sender);
commissionTicketFuture.get(SOME_TIMEOUT, TimeUnit.MILLIS);
return Response.NEW_TICKET_CREATED;

function showDetails(a){
  let value = a.getAttribute("value");
  // view value
  console.log(value)
}

Answer 3

您的问题分为两部分：

＃1：使用正确的属性

您不应在value标记中使用<a>属性，因为它不是HTML标准的有效属性；尝试改用data-val。以data-开头的属性使我们可以在标准的语义HTML元素上存储其他信息，而无需其他技巧。

示例：

<a data-val="2" onclick="showDetails(this)">Test</a>

对于JS函数，它可以写为：

function showDetails(obj) {
    console.log(obj.dataset.val); // 2
}

参考：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

＃2：防止<a>重定向

使用<a>的最初选择是不正确的，因为<a>旨在：（1）通过指定的超链接重定向到其他页面；或（2）使用锚点名称转到页面中的特定部分。

但是，您仍然可以使用JavaScript停止重定向（尽管不建议这样做）。如下编辑onclick函数：

<a data-val="2" onclick="showDetails(this); return false;">Test</a>

请注意return false已添加。

p.s。为了获得更好的编码标准，您应该将JS与HTML结构分开。

Answer 4

Anchor标签没有value属性，您可以在mdn中进行了解。如果需要为锚标记分配值，则可以使用自定义数据属性data-*。为了从您的javascript函数中的data-*获取值，可以尝试执行以下操作

const anchor = document.querySelector('a');
const str = anchor.data.value;

然后在您的ajax逻辑中使用它。

const url = 'getdetails.php';
const params = `q=${str}`;
const http = new XMLHttpRequest();

http.open('GET', `${url}?${params}`, true);
// ... other logic

获取<a> link?

4 个答案: