вставлять строку внутри тега <a>в другую строку кода при нажатии

Question

Я хочу вставить текст, содержащийся внутри тега, в другое место в коде после щелчка по нему.

поэтому в таком списке:

<ul>
  <li><a href="#">small</a></li>
  <li><a href="#">medium</a></li>
  <li><a href="#">large</a></li>
</ul>

При нажатии на маленький или любой из перечисленных вариантов. Мне нужно, чтобы эта строка была размещена там, где написано «ТЕКСТ ЗДЕСЬ» ниже.

<li class="that" data-option="{{ get_value:product_options size='TEXT HERE' }}{{ relate:stone_options }}{{ slug }} {{ /relate:stone_options }}{{ /get_value:product_options }}">{{ slug }}</li> 

Также необходимо будет переключиться с предыдущей выбранной опции, если щелкнуть маленькую, вы получите { {... size = 'small' ...}} но при нажатии на medium слово small меняется на medium.

Я не очень хорош в javascript не знаю, если это ajax вещь или что, помощь будет признательна!

Answer 1

Вот рабочий код для решения вашей проблемы. просто добавьте класс в тег A

<ul>
  <li><a href="#" class="colors">blue</a></li>
  <li><a href="#" class="colors">green</a></li>
  <li><a href="#" class="colors">red</a></li>
</ul>

<li class="that" data-option="{{ get_value:product_options 
size='TEXT HERE' }}{{ slug }} {{ /get_value:product_options }}">{{ 
slug }}</li>

<script type="text/javascript" charset="utf-8">

let a = document.querySelectorAll('.colors');
let that = document.querySelector('.that');

// get data-option attribute
let attr = that.getAttribute('data-option');
let atxt;
let aLength = a.lenght;
let i;
for(i = aLength; i >= 0; i--){

    a[i].addEventListener('click',()=>{
        atxt = a[i].textContent;
        // find and replace TEXT HERE with options text
        that.setAttribute('data-option',attr.replace("TEXT HERE",atxt));
    });
  }

</script>