Как поменять текст в другом div по клику?

Question

[Егор]

Мне надо, чтобы при клике на div "fifty-rubliks" текст в div "preview" менялся на "50 рубликов", а при клике на div "hundred-rubliks" текст в div "preview" менялся на "100 рубликов". Также надо, чтобы сохранялось форматирование от CSS
А, ну и также, изначально надпись "не выбран" написана красным цветом. Можно ли её цвет менять после нажатия?

HTML:

<div class="rubliks">
                <div class="fifty-rubliks" tabindex="1" onclick="changefifty()">
                        <h3><br><br><br><br><br><br>50 рубликов</h3>
                </div>
                <div class="hundred-rubliks" tabindex="1" onclick="changehundred()">
                    <h3><br><br><br><br><br><br>100 рубликов</h3>
                </div>
                <script src="***"></script>
            </div>
            <div class="buy">
                <h2>Товар</h2>
                <div class="preview">
                    <h3 id="change"><br><br><br><br><br><br>Не выбран</h3>
                </div>
                <div class="info">
                    <h2>Информация</h2><br><br>
                    <input type="text" placeholder="Ник"><br><br><br>
                    <input type="text" placeholder="Почта"><br><br><br><br>
                    <button class="pay">Оплатить</button>
                </div>
            </div>

JavaScript:

let change = document.getElementById('change')

function changefifty(){ 
    alert(change);
    change.innerText = "50 рубликов"
}
function changehundred(){
    change.innerText = "100 рубликов"
}

Comments

[Ankhena]

Вот ваш код и он работает https://codepen.io/AnnaSummer/pen/ExeygOY

1. Интерактивные элементы это кнопки и ссылки, но не div. Используйте button.
2. Отступы делаются с помощью margin и padding, а не кучи br.

[alekssamos]

И цвет менять можно добавляя или удаляя классы через js addClass / removeClass. а в CSS сделать .red { color:red; } и в js change.removeClass("red");.classList.remove

[Егор]

alekssamos можете прислать полный код, я не очень понял

[Егор]

Ankhena почему у меня, когда я пытаюсь сам (не по вашей ссылке) у меня не получается?

[Ankhena]

Егор, вон то подключение скрипта посреди разметки, это тот самый скрипт?
Приличные люди подключают скрипты перед закрывающим body.

[Егор]

Да, это он. Просто я только начал писать код и не знал, куда надо подключить это

[Егор]

Также вы говорили про использование кнопок? У меня про наведении элемент увеличивается. Вы предлагаете растянуть кнопку и сделать её невидимой? Но у вас же в ссылку нажатие на div работает

[Ankhena]

Егор, в демке я только показала, что ваш код рабочий. А не как надо делать.

Вы предлагаете растянуть кнопку и сделать её невидимой?

Ваш div ведь не невидимый, значит и кнопка будет не невидимой.

[Егор]

У меня этот код почему-то не работает. Нет, мне же надо, чтобы div было видно, а кнопка, на которую надо нажать, должна же быть невидимой по логике, чтобы не закрывать элементы div’a?

Answer 1

[Dimalite]

Егор, можно ВсЁ! Если работать, а не веселиться!
let change = document.querySelector("#change");

function changefifty() {
change.innerHTML = "50 рубликов";
change.style.color = "#000";
}

function changehundred() {
change.innerHTML = "100 рубликов";
change.style.color = "#000";
}

Comments

[Егор]

Спасибо, сейчас не могу проверить. Я напишу как только смогу. Наверное, это правильный вариант, я помечу его