Оповещать внутренний HTML о нажатой кнопке - PullRequest
Новая
       6

Оповещать внутренний HTML о нажатой кнопке

0 голосов
/ 30 января 2019

Я бы хотел, чтобы моя функция возвращала мне значение строки внутри кнопки, чтобы потом использовать его в других вещах.

Я пытался (this).innerHTML и this.innerHTML извлечь строку внутрикнопка и позже будет использоваться в js HTML: 

<button class="fonts" value="2" onclick="change((this).innerHTML)">Times New Roman</button><br>
<button class="fonts" value="1" onclick="change(this.innerHTML)">Calibri</button><br>
<button class="fonts" value="3" onclick="change(this.innerHTML)">Arial</button>

JS: 

function change(){
  alert();
}

Я хотел, чтобы он предупреждал «Times New Roman» или другие шрифты, но он предупреждалпустое значение.

Ответы [ 4 ]

0 голосов
/ 30 января 2019

Использование встроенных прослушивателей событий, таких как onclick="whatever()", считается плохой практикой.

Вместо этого получите коллекцию своих кнопок из DOM, используя document.querySelectorAll(selector), и используйте addEventListener() на каждой кнопке в for...of петля: 

let buttons = document.querySelectorAll('button.fonts')

for (const button of buttons) {
  button.addEventListener('click', function() { alert(this.textContent); })
}
<button class="fonts" value="2">Times New Roman</button><br>
<button class="fonts" value="1">Calibri</button><br>
<button class="fonts" value="3">Arial</button>
0 голосов
/ 30 января 2019

Попробуйте 

function change(btn) {
  alert(btn.innerHTML);
}
<button onclick="change(this)">Times New Roman</button>
<button onclick="change(this)">Calibri</button>
<button onclick="change(this)">Arial</button>
0 голосов
/ 30 января 2019

Следует избегать использования встроенных обработчиков * ( onclick , oninput и т. Д.) И вместо этого использовать прослушиватель событий в самом сценарии для оповещения о текстовом содержимом элементов.

Проверьте и запустите следующий фрагмент кода для практического примера того, что я описал выше: 

/* JavaScript */

var btns = document.querySelectorAll(".fonts"); // retrieve all buttons

//use forEach() to add a click event listener to each button
btns.forEach(function (btn) {
  btn.addEventListener("click", function() {
    alert(this.innerHTML);
  });
});
<!-- HTML -->

<button class="fonts" value="2">Times New Roman</button><br>
<button class="fonts" value="1">Calibri</button><br>
<button class="fonts" value="3">Arial</button>

Вы можете дополнительно сократить приведенный выше код, используя вместо этого JavaScript ES6 +, например: 

document.querySelectorAll(".fonts").forEach(btn => {
  btn.addEventListener("click", () => alert(btn.innerHTML));
});
<button class="fonts" value="2">Times New Roman</button><br><button class="fonts" value="1">Calibri</button><br><button class="fonts" value="3">Arial</button>

NB Обратите внимание, что если вы используете подход ES6 +, вам потребуется использовать компилятор JavaScript, такой как Babel для преобразования вашего синтаксиса ES6 + в обратно совместимую версию JavaScript на производстве для поддержки текущих и старых браузеров или сред.

Совместимость с IE11:

Если вас беспокоитIE11-совместимость метода forEach(), вы можете использовать простой for loop вместо этого, например: 

/* JavaScript */

var btns = document.querySelectorAll(".fonts"); // retrieve all buttons

//use forEach() to add a click event listener to each button

for(i=0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    alert(this.innerHTML);
  });
}
<!-- HTML -->

<button class="fonts" value="2">Times New Roman</button><br>
<button class="fonts" value="1">Calibri</button><br>
<button class="fonts" value="3">Arial</button>
0 голосов
/ 30 января 2019

Вы на самом деле не передаете innerHTML в функцию.JS должен выглядеть примерно так: 

function change(font){
    alert(font);
}

А HTML-код будет выглядеть примерно так: 

<button onclick="change(this.innerHTML)">Times New Roman</button>
<button onclick="change(this.innerHTML)">Calibri</button>
<button onclick="change(this.innerHTML)">Arial</button>

Вот скрипка этого в действии: JSFiddle

Если вы хотите еще более простую реализацию, вы можете сделать что-то вроде этого:

JS: 

function change(e){
        e = e || window.event;
    e = e.target || e.srcElement;
    alert(e.innerHTML);
}

HTML: 

<button onclick="change()">Times New Roman</button>
<button onclick="change()">Calibri</button>
<button onclick="change()">Arial</button>

JSFiddle Demo

...