Обращение к переменной со строкой

Question

Я хочу написать hello в абзаце на основе кнопки, которую нажимает пользователь. Я пробовал следующее, но это не помогло. Как мне это сделать?

const para1 = document.getElementById('para1');
const para2 = document.getElementById('para2');

const options = document.getElementsByClassName('option');
for (let i = 0; i < options.length; i++) {
  let foo = options[i].classList[1];
  options[i].addEventListener('click', () => {
    process(foo)
  })
}

function process(x) {
  let goo = `para${x}`; //This doesn't work
  goo.textContent = "hello";
  console.log(x);
  console.log(goo);
}

#para1 {
  width: 50px;
  height: 50px;
  background: blue;
}

#para2 {
  width: 50px;
  height: 50px;
  background: red;
}

<button class="option 1">Write on para1</button>
<button class="option 2">Write on para2</button>
<p id="para1"></p>
<p id="para2"></p>

Answer 1

Обновление строки

let goo = `para${x}`; //This doesn't work

с помощью

let goo = window['para'+x];

должно работать

Доступ к javascript переменной в виде строк выполняется с помощью синтаксиса скобок []:

//global variables:
var foo = "hello";
var bar = "foo";
console.log(window[bar]); //prints "hello"

//for objects:
var someObject = {
  "foo": "hello"
};
var bar = "foo";
console.log(someObject[bar]);

Answer 2

Вы пытаетесь установить textContent строки вместо узла DOM.

function process(x) {
  let goo = document.getElementById(`para${x}`); //Try this instead
  goo.textContent = "hello";
  console.log(x);
  console.log(goo);
}

Answer 3

Вы пытаетесь установить свойство textContent для строки, а не для элемента. Вместо строки x в методе process нужно передать найденный элемент.

const para1 = document.getElementById('para1');
const para2 = document.getElementById('para2');

const options = document.getElementsByClassName('option');
for (let i = 0; i < options.length; i++) {
  let option = options[i];
  options[i].addEventListener('click', () => {
    process(option); // passing the element button.option
  })
}

function process(option) {
  const x = option.classList[1]; // get second class name
  const para = document.getElementById(`para${x}`); // find paragraph by id
  para.textContent = "hello"; // set text on paragraph
}

#para1 {
  width: 50px;
  height: 50px;
  background: blue;
  color: white;
}

#para2 {
  width: 50px;
  height: 50px;
  background: red;
  color: white;
}

<button class="option 1">Write on para1</button>
<button class="option 2">Write on para2</button>
<p id="para1"></p>
<p id="para2"></p>