Как вывести в элемент, указанное пользователем?

Question

[Alex_87]

Здравствуйте! Задача следующая.
Имеется элемент:

при нажатии на который выходит окно:

В этом окне, пользователь может выбрать город, который должен отобразиться в первом элементе(первое изображение), на месте Казань!
Вопрос состоит в том, как это сделать с помощью checkbox или js? Я просто не понимаю, как мне начать. Прошу помочь!

Answer 1

[Stalker_RED]

При клике по списку записываем выбранное значение в нужный элемент.

Comments

[Stalker_RED]

Alex_87, ты не видишь код? там три строчки всего.

[Alex_87]

Не получается! Вот код. Проблема, либо во вложенности, либо в том, что ul с li находиться в модальном окне...

<div class="info-local">               
                <div class="city">Ваш город<span id="choose">  Казань</span></div>                
                <div class="for-callme-popup">
                    <div class="pop-title">Укажите свой город</div>
                    <p>От этого зависит стоимость доставки и варианты оплаты в ваш регион</p>
                    <ul class="own">               
                       <li>Москва</li>
                       <li>Новгород</li>                                           
                       <li></li>
                       <li></li>                       
                       <li></li>                       
                    </ul>
               </div>

JS

document.querySelector('.own').onclick = function(evt) {
  if (evt.target.matches('li')) {
    choose.textContent = evt.target.textContent
  }
 }

[Stalker_RED]

Alex_87, Собери может пример в песочнице?
Или ты хочешь чтобы я еще и модальное окно за тебя написал? )

[Alex_87]

Stalker_RED, Зачем вам писать за меня модальное окно, когда я уже сам его сделал?
Отправляю код: https://codepen.io/Alexei_87/pen/MRQVjw

[Stalker_RED]

Alex_87, вы при помощи innerHTML превращаете дом-элемент в строку, а потом обратно. Обработчики слетают.
Не надо так, перемещайте через append

[Alex_87]

Stalker_RED, Вы пробовали сделать через append, у вас получилось? ... Потому что у меня не выходит. Как вы это делаете?

[Stalker_RED]

Alex_87, а почитать что такое append вы не собираетесь? :)
https://codepen.io/stalker-red/pen/WWMPJK

[Alex_87]

Stalker_RED, Спасибо вам большое! Я смотрел синтаксис, пробовал внедрить append, но у меня не вышло. ... Вы сколько лет программируете? Что посоветуете в изучении javascript? Как правильно подойти к этому делу? ... К примеру, я читал про append, но по примерам, которые я видел, до вашего решения, я не дошёл бы!

[Stalker_RED]

Alex_87,
За деньги - больше десяти лет уже. А до этого еще для саморазвития что-то пытался писать.

Посоветую какой-нибудь толковый курс, типа learn.javascript.ru или udemy, или выберите любой с нормальными рейтингами.
При любых непонятках с синтаксисом смотрите MDN, там нормальные примеры почти во всех статьях.

У вас в коде было form.append('.селектор') что просто добавляло этот селектор в конец блока form.

[Alex_87]

Stalker_RED, Или вот пример! Я добавил элементу, с помощью js, класс open, в котором прописано display: block.
При нажатии на один элемент, у второго, должен добавиться этот класс с соответсвующим свойством. Класс действительно добавляется... Но свойство(display: block) перечёркнуто. Как это понять? Ошибки нет... но код всё равно не работает. И что у гугла спрашивать)?

[Stalker_RED]

Alex_87, класс .catalog имеет больший приоритет. Либо он выше описан в css-файле либо из-за большей специфичности (скорее всего).

[Alex_87]

Stalker_RED, Буду думать, в чём проблема. Пока не решил...

[Alex_87]

Stalker_RED, Получилось исправить проблему, но у меня такой вопрос. Я перешёл по ссылке и прочёл следующее:

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

И я подумал, что вот такой код:
popup.catalog.style.display = 'block';
Но ничего не сработало... Тогда, я добавил строчку, которая у меня была и получилось

popup.catalog.classList.add('open')
        popup.catalog.style.display = 'block';

Вот так уже сработало. Но, не является ли это велосипедом? Хоть это и сработало, я до конца не понимаю почему? ... И ещё... Как этот код модифицировать таким образом, чтобы при одном клике, класс со стилем появлялся, а при втором клике, он исчезал?

this.openK = function(){
        
        popup.catalog.classList.add('open')
        popup.catalog.style.display = 'block';
    }

document.querySelector('.catalog-block').onclick = function(){
        p.openK();
    };

[Stalker_RED]

Alex_87,
classList.toggle('open')
при этом поправить специфичность в css, чтобы open имел больший приоритет.

[Stalker_RED]

Alex_87, рекомендую прекратить страдать фигней и подправить класс .open добавив специфичности.