Почему this.value не определено при получении значения изображений? - PullRequest
Новая
       6

Почему this.value не определено при получении значения изображений?

1 голос
/ 24 сентября 2019

плохо знаком с кодированием, пожалуйста, будьте осторожны.Это должно быть сделано с чистым JavaScript , из-за ограничений нашего класса.На данный момент все, что я пытаюсь сделать, это console.log() значение изображения, на которое нажал пользователь.В данном случае это либо value="0" для «Рок», value="1" для «Бумага» или value="2" для «Ножницы».Я неопытен с использованием this.value, и мне интересно, могу ли я передать значение кликаемого изображения в качестве параметра в функцию, называемую "check ()".

HTML 

<img src="img/rock.png" alt="Rock" id="rock" value="0" onclick="check(this.value)">
<img src="img/paper.png" alt="Paper" id="paper" value="1" onclick="check(this.value)">
<img src="img/scissors.png" alt="Scissors" id="scissors" value="2" onclick="check(this.value)">

JavaScript (без jQuery) 

function check(inputValue) {
            console.log(inputValue);
        }

Я ожидаю, что результат будет 0, 1 или 2, в зависимости от того, какое изображение было нажатопользователь.На данный момент все, что я получаю, это undefined.

Ответы [ 3 ]

4 голосов
/ 24 сентября 2019

Поскольку изображения не имеют атрибута value, он всегда возвращается как undefined.Альтернативой может быть использование атрибута данных .Их можно получить с помощью this.dataset.<attributeName>.

Например, к data-value можно обратиться, выполнив this.dataset.value. 

function check(inputValue) {
  console.log(inputValue);
}
<img src="img/rock.png" alt="Rock" id="rock" data-value="0" onclick="check(this.dataset.value)">
<img src="img/paper.png" alt="Paper" id="paper" data-value="1" onclick="check(this.dataset.value)">
<img src="img/scissors.png" alt="Scissors" id="scissors" data-value="2" onclick="check(this.dataset.value)">
3 голосов
/ 24 сентября 2019

Изображения не имеют атрибута значения.Возможно, вам лучше использовать атрибут данных. 

function check(inputValue) {
  console.log(inputValue.dataset.value);
}
<img src="img/rock.png" alt="Rock" id="rock" data-value="0" onclick="check(this)">
<img src="img/paper.png" alt="Paper" id="paper" data-value="1" onclick="check(this)">
<img src="img/scissors.png" alt="Scissors" id="scissors" data-value="2" onclick="check(this)">
0 голосов
/ 24 сентября 2019

JavaScript нормальный.Вся проблема в вызове функции.в JS, когда вы получаете элемент html, его атрибуты не являются свойствами.Чтобы получить атрибут, вам нужно вызвать this.getAttribute('<attr name>') (в вашей задаче this.getAttribute('value'))
Таким образом, любые атрибуты data- не нужны.

...