0

Решил сделать по типу https://github.com/learn-co-students/React-Pizza-atlanta-web-042219, ограничился 1 категорией и когда решил присваивать значение абзацу из input, следуя тактике "Если повторяешь 1 и тот же код более 3 раз, то оптимизируй его, балван" сортирнул массив со сравниванием атрибута абазаца и кнопки и вводом в абзац input.value. Проблема - TypeError: but.getAttribute is not a function

OnDoing () {
        let bascet = document.getElementsByClassName('basc');
        let input = document.getElementById('topper');
        let but = document.getElementsByClassName('pizza-but');
        let i;
        for (i=0; i<=bascet.length; i++) {
            if (bascet[i].getAttribute('data-tab') == but.getAttribute('data-tab')) {
                bascet[i].innerHTML = bascet[i].innerHTML;
            }
        }


    }

    OnRemaster () {
        let bascet = document.getElementsByClassName('basc');
        //let attr = this.getAttribute('data-tab');
        let input = document.getElementById('topper');
        let but = document.getElementsByClassName('pizza-but');
        let i;
        for (i=0; i<=bascet.length; i++) {
            console.log(bascet[i]);
            if (bascet[i].getAttribute('data-tab') == but.getAttribute('data-tab')) {
                bascet[i].innerHTML = input.value;
                console.log(bascet[i]);
            }
        }
    }

    render () {
        return (
            <div className="main-pizza">
            <span className="pizza-headline">Welcome to School Pizza</span>
            <input id="topper"></input>
            <button onClick={this.OnRemaster} className="pizza-but">Submit</button><br />
            <p className="pizza-text">Topping</p>
            <p data-tab="1" id="pizza-basc1" className="basc">Peperoni</p>
            <p className="pizza-text">Topping</p>
            <p data-tab="2" id="pizza-basc2" className="basc">Peperoni</p>
            <button onClick={this.OnDoing} data-tab="1" id="first" className="pizza-but">Edit Pizza</button>
            <button onClick={this.OnDoing} data-tab="2" id="second" className="pizza-but">Edit Pizza</button>
            </div>
        );
    }
2
  • 1
    чёт реактом не пахнет
    – meine
    Commented 7 февр. 2020 в 16:03
  • зачем реакт нужен был, непонятно
    – WVFFLIFE
    Commented 7 февр. 2020 в 16:46

1 ответ 1

0

Объекты, возвращаемые методом getElementsByClassName не содержат свойства getAttribute. Атрибуты можно проверить в свойстве attributes. Условие следует записать так:

if (bascet[i].attributes['data-tab'].value == but.attributes['data-tab'].value) {
  bascet[i].innerHTML = input.value;
  console.log(bascet[i]);
}
1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.