Javascript изменить текст кнопки по значению

Question

Возможно, я не гуглюсь правильно, но у меня есть простой вопрос, на который я не смог найти ответ.У меня есть группа кнопок с определенным текстом.Поскольку страница является динамической в ​​зависимости от выбора пользователя, может быть, например, вырезано пять кнопок.

<button>Cut</button>
<button>Copy</button>
<button>Speak</button>
<button>Fullscreen</button>

Выше вы можете видеть одну группу, но одни и те же кнопки могут быть скопированы 10 раз.Я хочу изменить текст этих кнопок, получив их значение.Например:

Получение всех кнопок с текстом "Cut" и изменение их значения на "foo"

Затем я хочу сделать что-то похожее с другим текстом для других кнопок.Как это сделать?

Answer 1

Я бы предложил получить все кнопки, используя document.getElementsByTagName(), и выполнить фильтрацию по содержанию.Затем вы можете перебрать свой отфильтрованный массив и выполнить любые изменения, которые вы хотите:

// get all buttons as an array
const buttons = Array.from(document.getElementsByTagName("button"));

// filter the array using a strict string equality check
const cutButtons = buttons.filter(button => button.textContent === "Cut");

// perform your modifications
cutButtons.forEach(button => {
   button.textContent = "foo";
});

Answer 2

Вы можете использовать querySelectorAll(), чтобы получить все кнопки.Затем прокрутите их, чтобы проверить textContent для изменения кнопки:

var btn = [].slice.call(document.querySelectorAll('button'));

btn.forEach(function(b){
  if(b.textContent == 'Cut')
    b.textContent = 'foo';
});

<button>Cut</button>
<button>Copy</button>
<button>Speak</button>
<button>Fullscreen</button>
<button>Cut</button>

Answer 3

Получить кнопки по имени тега, используя getElementsByTagName (), затем с помощью для проверки содержимого цикла и изменить его, если «Cut», используя Node.textContent

var cut=document.getElementsByTagName("button");
    for(var i=0;i<cut.length;i++){
        if(cut[i].textContent=="cut"){
            cut[i].textContent="foo"
    }
}

Answer 4

Используйте document.querySelectorAll, чтобы выбрать все кнопки и просмотреть их, используя цикл forEach.Проверьте их текст, используя textContent, и, если это Cut , установите значение foo

document.querySelectorAll('button').forEach((e)=>e.textContent=='Cut'?e.textContent="foo":false)

<button>Cut</button>
<button>Copy</button>
<button>Cut</button>
<button>Speak</button>
<button>Cut</button>
<button>Fullscreen</button>
<button>Cut</button>