How do I get the value of the js attribute?

Question

How do I get the value of the js attribute?

I'm trying to connect the slider. The value to get is in the aria-valuetext attribute. I already wrote it (in js) and aria-ValueText, aria-valueText - but nothing happens.

HTML

<div class="testt" data-handle="0" tabindex="5" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="25.0" aria-valuetext="4000" style="z-index: 4;"></div>
  <button type="submit" id="super">Отправить</button>
  <div id="resval"></div>
</div>

JS

function btnfunc() {
  var price = document.getElementsByClassName('testt')[0]["aria-valuetext"];
  document.getElementById('resval').innerHTML = price;
}
document.getElementById("super").onclick = btnfunc;

And another question, if I want to get the value not by clicking on the button, but by onclick, will adding the attribute via js work?

$(".testt").attr('onclick', "onlinechanger()")

And the function already calculates and outputs the result, as usual.

0

javascript jquery атрибуты

Author: MedvedevDev, 2017-09-11

Source

2 answers

score 2 · Answer 1

document.getElementsByClassName('testt')[0].getAttribute('aria-valuetext')
It will work, but why?

2

Author: MedvedevDev, 2017-09-11 15:17:38

score -1 · Answer 2

function renderPrice() {
    let price = document.querySelector('[aria-valuetext]').getAttribute('aria-valuetext');
    let priceField = document.querySelector('#resval');
    priceField.innerHTML = price;
}

document.addEventListener('click', renderPrice);

<div class="testt" data-handle="0" tabindex="5" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="25.0" aria-valuetext="4000" style="z-index: 4;"></div>
<button type="submit" id="super">Отправить</button>
<div id="resval"></div>
</div>

The onClick event is assigned to document.