Получение значения <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

Ваши проблемы состоят из 2 частей:

# 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.

пс для лучшего стандарта кодирования, вы должны отделить JS от структуры HTML.

Answer 2

Вы можете написать функцию Javascript для получения значения по ссылке следующим образом:

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

<!--<button value="1" onclick="showDetails(this)">Button link</button>-->
<a value="2" onclick="showDetails(this)">Anchor link</a>

Answer 3

У тега привязки нет атрибута значения, об этом можно прочитать в mdn .Если вам нужно присвоить значение метке привязки, вы можете использовать пользовательский атрибут данных data - *.Чтобы получить значения из data-* в вашей функции javascript, попробуйте что-то вроде этого

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

Answer 4

Только несколько выбранных элементов, таких как <input> с, <textarea> с и <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=" 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>