Как использовать атрибут функции в качестве атрибута события onclick (элемент ввода)? - PullRequest
Новая
       16

Как использовать атрибут функции в качестве атрибута события onclick (элемент ввода)?

0 голосов
/ 19 февраля 2019

Допустим, у меня есть код ниже: 

function addValue(x){

    var button = document.createElement( "input" );
    button.setAttribute("type", "submit");
    button.setAttribute("src", "images/repeatStageIcon.png");
    button.setAttribute("class", "option-image");
    button.setAttribute("title", "Repeat Current Stage!");

    //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
    button.setAttribute("onclick", "createRepeatStage( x )");

    var p = document.getElementById("myDiv");
    p.appendChild(button);
}

function createRepeatStage( thisX ){
   alert(thisX);
}

addValue(6);
<html>

  <body>
  
     <div id="myDiv"></div>
  </body>
</html>

ВОПРОС:

Как передать атрибут x в событии onclick, чтобыкогда вызывается метод createRepeatStage (x); , значение x будет передано в этот метод?

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

На самом деле на вашей странице есть две вещи, которые нужно исправить.

  1. Вы не можете оценить функцию addValue до загрузки страницы, так как не будет элемента myDiv.Стандартный способ выполнения кода после загрузки страницы - использовать атрибут onLoad в элементе body.То есть: 
    <body onload="addValue(6)">
        <h1>Hola</h1>

        <div id="myDiv"></div>
    </body>
как указать новой кнопке обработчик "onclick".Вы можете просто назначить атрибут onclick для кнопки: 
            function addValue(x){

                var button = document.createElement( "input" );
                button.setAttribute("type", "submit");
                button.setAttribute("class", "option-image");
                button.setAttribute("title", "Repeat Current Stage!");

                //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
                button.onclick = () => createRepeatStage( x );

                var p = document.getElementById("myDiv");
                p.appendChild(button);
            }

Обратите внимание, что вы можете передать функцию стрелки, это сжатая форма ... хотя она не может работать (на самом деле) старые браузеры.Чтобы быть уверенным, что ваш код работает везде, вы можете использовать «традиционный» синтаксис функции 

            function addValue(x){

                var button = document.createElement( "input" );
                button.setAttribute("type", "submit");
                button.setAttribute("class", "option-image");
                button.setAttribute("title", "Repeat Current Stage!");

                //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
                button.onclick = function() { createRepeatStage( x ) };

                var p = document.getElementById("myDiv");
                p.appendChild(button);
            }

Надеюсь, это поможет - Карлос

PS: возможно, другие настройки кнопок можно / нужно заменитьпутем прямого присвоения атрибута - Карлос

0 голосов
/ 19 февраля 2019

Вы можете обернуть обработчик в другую функцию. 

button.addEventListener("click", function(event) {
  createRepeatStage(x);
});

Значение x будет сохранено закрытием .

Обратите внимание, я использовалaddEventListener вместо setAttribute. 

function addValue(x){

    var button = document.createElement( "input" );
    button.setAttribute("type", "submit");
    button.setAttribute("src", "images/repeatStageIcon.png");
    button.setAttribute("class", "option-image");
    button.setAttribute("title", "Repeat Current Stage!");

    //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
    button.addEventListener("click", function(event) {
      createRepeatStage(x);
    });

    var p = document.getElementById("myDiv");
    p.appendChild(button);
}

function createRepeatStage( thisX ){
   alert(thisX);
}

addValue(6);
<html>
  <body>
     <div id="myDiv"></div>
  </body>
</html>

Использование bind

Если по какой-то причине вы против включения обработчика в функцию, вы можете воспользоваться bind . 

function addValue(x){
    var button = document.createElement( "input" );
    button.setAttribute("type", "submit");
    button.setAttribute("src", "images/repeatStageIcon.png");
    button.setAttribute("class", "option-image");
    button.setAttribute("title", "Repeat Current Stage!");

    //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
    button.addEventListener("click", createRepeatStage.bind(null, x));

    var p = document.getElementById("myDiv");
    p.appendChild(button);
}

function createRepeatStage( thisX ){
   alert(thisX);
}

addValue(6);
<html>
  <body>
     <div id="myDiv"></div>
  </body>
</html>
...