Как считать value элемента? (пишет undefined)

110
06 января 2021, 01:40

Столкнулся с проблемой, при считывании значении элемента выводит undefined. Есть две кнопки которым на onclick стоит одна функция. В каждой кнопке есть свое value, но функция отказывается читать его и выводит undefined. Подскажите, что я сделал не так, где ошибка?

function someFunc(){ 
  var value = this.value 
  document.write(value); 
}
<button class="btSize" onclick="someFunc()" value="minus">-</button> 
<button class="btSize" onclick="someFunc()" value="plus">+</button>

Answer 1

Проблема в this. Его можно записать в событии в HTML, и получать как параметр функции:

function someFunc(e){ 
  var value = e.value 
  console.log(value); 
}
<button class="btSize" onclick="someFunc(this)" value="minus">-</button> 
<button class="btSize" onclick="someFunc(this)" value="plus">+</button>

Или... можно не заморачиваться с onclick="..." и сразу в скрипте всё записать:

let x = document.getElementsByClassName('btSize'); 
for(let i = 0; i < x.length; i++){ 
  x[i].addEventListener('click', function(){ 
    console.log( this.value );  
    /* здесь this сразу указывает на элемент, запустивший функцию  
       x[i].value — выдало бы тот же результат */ 
  }); 
}
<button class="btSize" value="minus">-</button> 
<button class="btSize" value="plus">+</button>

Более страшный вариант:

let x = document.getElementsByClassName('btSize'); 
[...x].forEach( (e)=> e.addEventListener('click', ()=> console.log( e.value ) ) ); 
  
/* Перевод в чуть более человеческий вид: 
 
[...document.getElementsByClassName('btSize')].forEach(  
  function(element){ 
    element.addEventListener('click', function(){ 
      console.log( this.value ); 
    }); 
  } 
); 
 
*/
<button class="btSize" value="minus">-</button> 
<button class="btSize" value="plus">+</button>

Answer 2

function someFunc(element) { 
  this.value = element.value; 
  console.log(this.value); 
}
<button class="btSize" onclick="someFunc(this)" value="minus">-</button> 
<button class="btSize" onclick="someFunc(this)" value="plus">+</button>

Answer 3

function someFunc(){ 
  var value = this.value 
  document.write(value); 
} 
 
document.querySelectorAll('.btSize')[0].onclick =  
document.querySelectorAll('.btSize')[1].onclick = someFunc;
<button class="btSize" value="minus">-</button> 
<button class="btSize" value="plus">+</button>

READ ALSO
JQuery. Как изменить стиль выделенного текста?
HTML

JQuery. Как изменить стиль выделенного текста?

Нагуглил метод select(), но все равно ничего не выходит

 220
Свойство Resources пустое
c#

Свойство Resources пустое

Я создаю приложение wpf и у меня есть вот такие строчки кода:

 99
ASP .NET Core 2 свойство навигации
c#

ASP .NET Core 2 свойство навигации

Создал два класса со связью один к одному

 79
Клонирование коллекций ICollection&lt;Element&gt;
c#

Клонирование коллекций ICollection<Element>

Необходимо клонировать коллекцию так, чтобы все её объекты Element так же отвязались от исходной коллекцииПодскажите, как лучше всего это сделать?

 118