Изменить value у кнопки через js

Question

Не очень понимаю, что делаю не так. Вообщем, есть кнопка в html

<input type="button" value="Прокачать на 1 уровень| 100$"  class= "btn1" onclick="update1()">

К ней обращаюсь через JS, который импортирую в конце html в теге body.

let btn1 = document.getElementsByClassName("btn1");
let score = 0;
let updating = 1;
let btn1Price = 100;
function update1() {
    score = score - btn1Price;
    btn1Price = Math.floor(btn1Price * Math.pow(1.15,updating));
    document.getElementsByTagName("h1")[0].firstChild.data = score + "$";
    btn1.value = "Прокачать на 1 уровень| " + btn1Price +"$"
    console.log(btn1.value ) // При нажатии в консоль выводит "Прокачать на 1 уровень| 114$" - а сама кнопка визуально никак не меняется.
    //if1();
    updating += 1;
}

Answer 1

Как верно отметил @SwaD, btn1 в вашем случае — это не сама кнопка, а HTMLCollection, то есть коллекция элементов с классом btn1. Для того чтобы работать с конкретной кнопкой, вам нужно обращаться к элементу через индекс коллекции, например, btn1[0]. Либо вы можете обратиться к элементу по id, если он у вас есть, что позволит избежть необходимсти работать с коллекцией

let btn1 = document.getElementsByClassName("btn1")[0];
let score = 0;
let updating = 1;
let btn1Price = 100;

function update1() {
  score = score - btn1Price;
  btn1Price = Math.floor(btn1Price * Math.pow(1.15, updating));
  btn1.value = "Прокачать на 1 уровень| " + btn1Price + "$";
  console.log(btn1.value);
  updating += 1;
}
document.querySelector('.btn1').onclick = update1;

<input type="button" value="Прокачать на 1 уровень| 100$" class="btn1">

вариант с id

let btn1 = document.getElementById("btn1"); //тут уже не нужно обращаться к индексу элемента
let score = 0;
let updating = 1;
let btn1Price = 100;

function update1() {
  score = score - btn1Price;
  btn1Price = Math.floor(btn1Price * Math.pow(1.15, updating));
  btn1.value = "Прокачать на 1 уровень| " + btn1Price + "$";
  console.log(btn1.value); //h1 заменила на консоль
  updating += 1;
}

btn1.onclick = update1;

<input type="button" id="btn1" value="Прокачать на 1 уровень| 100$">

БЛОГ НА HUSL

Изменить value у кнопки через js

Ответы (1 шт):