Как изменить текст кнопки при нажатии?

Question

Я запускаю свой веб-сайт вне квадратного пространства, и у меня есть кнопка с надписью «DELIVER ME», но когда вы нажимаете на нее, я хочу, чтобы она говорила «G.T.F.O», пока загружается следующая страница.

У меня нет кода для этого, и мне нужна помощь в его написании.

function changeButtonText(DELIVER ME, G.T.F.O.){
    if (this.value== "DELIVER ME"){
     this.value = "G.T.F.O.";
    } else {
     this.value = "DELIVER ME";
   }
}

changeButtonText();

Я хочу, чтобы кнопка говорила «ДОСТАВЬ МЕНЯ», пока вы не нажмете ее, а затем, как только вы нажмете на нее, кнопка скажет «G.T.F.O.»

Answer 1

<button type="button" id="btn" onclick=changeButtonText()>deliver me</button>

<script>

    function changeButtonText(){
    document.getElementById("btn").innerHTML = "GTFO";             
    }                       

</script>

Answer 2

Я хочу, чтобы кнопка говорила «ПОСТАВИТЬ МЕНЯ», пока вы не нажмете ее, а затем, как только вы нажмете на нее, кнопка скажет «G.T.F.O.»

Учитывая эту кнопку:

<input type="button" id="myButton" value="DELIVER ME">

Вы можете сделать это так:

const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
  this.value = "G.T.F.O."
});

Или, если кнопка такая:

<button id="myButton">DELIVER ME</button>

Вы бы сделали:

const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
  this.innerText = "G.T.F.O."
});

Answer 3

большинство ответов может решить вашу конкретную проблему, но я просто хочу добавить больше информации о выборе htmlElement.

в DOM VanillaJS (чистый Javascript). Вы можете выбрать элемент методом 3 DOM.

1. Выбор по атрибуту идентификатора

   elem = document.getElementById("id")

2. Выбор по атрибуту класса

   elem = document.getElementsByClassName("class")

3. Выбор по TagName

   elem = document.getElementByTagName("Tag")

и еще 1 дополнительный способ, которым пользовались.

elem = document.querySelector(selector)

Селектор

может быть одним из «.class», «# id» или «Tags»

Спасибо

Answer 4

function changeText() {
  return document.querySelector("#button").innerHTML = "New text";
}

document.addEventListener("click", changeText);

<button type="button" id="button">Text</button>