Параметр строки строки в функции onclick

Я хотел бы передать параметр (т.е. строку) в функцию Onclick. На данный момент я делаю это:

'<input type="button" onClick="gotoNode(' + result.name + ')" />'

с result.name, например, равным строке "Добавить". Когда я нажимаю на эту кнопку, у меня есть ошибка, которая говорит, что Add не определен. Поскольку этот functioncall работает отлично с числовым параметром, я предполагаю, что он имеет какое-то отношение к символам "" в строке. Кто-нибудь имел эту проблему раньше?

Ответы

Ответ 1

Похоже, вы строите элементы DOM из строк. Вам просто нужно добавить несколько цитат вокруг result.name:

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'

Вы действительно должны делать это с правильными методами DOM.

var inputElement = document.createElement('input');
inputElement.type = "button"
inputElement.addEventListener('click', function(){
    gotoNode(result.name);
});

document.body.appendChild(inputElement);

Просто помните, что если это цикл или что-то в этом роде, result изменится до того, как событие сработает, и вам потребуется создать дополнительный пузырь области действия, чтобы скрыть изменяющуюся переменную.

Ответ 2

Несколько проблем для меня касаются использования escape-строки в onClick, и с ростом числа аргументов поддерживать его становится громоздким.

Следующий подход будет иметь один переход - при щелчке - передать управление методу-обработчику, а метод-обработчик, основанный на объекте события, может вычесть событие щелчка и соответствующий объект.

Это также обеспечивает более чистый способ добавления большего количества аргументов и большей гибкости.

<button type="button" 
        className="btn btn-default" 
        onClick="invoke" 
        name='gotoNode' 
        data-arg1='1234'>GotoNode</button>

На уровне JavaScript:

  invoke = (event) => {
    let nameOfFunction = this[event.target.name];
    let arg1 = event.target.getAttribute('data-arg1');
    //We can add more args as needed...
    window[nameOfFunction](arg1) 
    //hope function is in window. 
    //Else the respective object need to be used 
    })
  }

Преимущество здесь в том, что мы можем иметь столько аргументов (в приведенном выше примере, data-arg1, data-arg2....), сколько необходимо.

Ответ 3

Я предлагаю даже не использовать обработчики HTML onclick и использовать что-то более общее, например document.getElementById.

HTML:

<input type="button" id="nodeGoto" />

JavaScript:

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);

Ответ 4

Я предполагаю, что вы создаете кнопку, используя сам JavaScript. Таким образом, ошибка в вашем коде заключается в том, что она будет отображать в этой форме

<input type="button" onClick="gotoNode(add)" />'

В этом текущем состоянии add будет рассматриваться как идентификатор, например, переменные или вызовы функций. Вы должны избегать значения, подобного этому

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'

Ответ 5

Это хороший и опрятный способ отправки значения или объекта.

<!DOCTYPE html>
<html>
<body>
<h1  onclick="test('wow',this)">Click on this text!</h1>
<script>
var test =function(value,object){  
object.innerHTML=value;
};     
</script>
</body>
</html>

Ответ 6

Попробуйте это.

HTML:

<button id="a1" type="button" onclick="return a1_onclick('a1')">a1</button>

JavaScript:

<script language="javascript" type="text/javascript">
    function a1_onclick(id) {
        document.getElementById(id).style.backgroundColor = "#F00";   
    }
</script>

Примечание: не забудьте отправить аргументы между символами '', как ('a1') в html-коде

Ответ 7

Несколько параметров:

   bounds.extend(marker.position);
        bindInfoWindow(marker, map, infowindow,
     '<b>' + response[i].driver_name + '</b><br>' + 
     '<b>' +moment(response[i].updated_at).fromNow() + '</b>
      <button onclick="myFunction(\''+response[i].id+'\',\''+driversList+'\')">Click   me</button>'
    );

Ответ 8

Отредактировано: Если требование заключается в ссылке на глобальный объект (js) в вашем HTML-коде, вы можете попробовать это. [Не используйте кавычки ('или ") вокруг переменной]

Fiddle ссылка.

JavaScript:

var result = {name: 'hello'};
function gotoNode(name) {
    alert(name);
}

HTML:

<input value="Hello" type="button" onClick="gotoNode(result.name)" />

Ответ 9

если ваша кнопка генерируется динамически:

Вы можете передавать строковые параметры в функции JavaScript, как показано ниже:

Я передал 3 параметра, где третий является строковым параметром, надеюсь, это поможет.

var btn ="<input type='button' onclick='RoomIsReadyFunc("+ID+","+RefId+",\""+YourString+"\");'  value='Room is Ready' />";

//your javascript function

function RoomIsReadyFunc(ID, RefId, YourString)
{
  alert(ID);
  alert(RefId);
  alert(YourString);
}

Ответ 10

также вы используете символ серьезного акцента (`) в строке

попробуйте:

`<input type="button" onClick="gotoNode('${result.name}')" />`

для получения дополнительной информации посетите MDN и fooobar.com/questions/42903/...

Chrome, Edge, Firefox (Gecko), Opera, Safari поддерживают, но не поддерживают Internet Explorer.

Ответ 11

Вот решение Jquery, которое я использую.

Jquery

$("#slideshow button").click(function(){
    var val = $(this).val();
    console.log(val);
});

HTML

<div id="slideshow">
    <img src="image1.jpg">
    <button class="left" value="back">&#10094;</button>
    <button class="right" value="next">&#10095;</button>
</div>

Ответ 12

Вы можете передать refrence или string value только функцию put внутри запятой doube "" asp ниже моментального снимка

Ответ 13

Для передачи нескольких параметров вы можете передать строку, объединив ее со значением ASCII, например, для одинарных кавычек мы можем использовать '

var str= "&#39;"+ str+ "&#39;";

Ответ 14

Для передачи нескольких параметров вы можете передать строку, объединив ее с помощью значения ASCII, например, для одинарных кавычек мы можем использовать '

var str= "&#39;"+ str+ "&#39;";

тот же параметр, который вы можете передать в событие onclick(). В большинстве случаев он работает с каждым браузером.

Ответ 15

если использовать для генерации набора кнопок с разными параметрами обработчиков. https://www.w3schools.com/js/js_function_closures.asp

let some_button = document.createElement( "button" );
some_button.type = "button";

some_button.onclick = doWithParam( some_param );

function doWithParam( param ){
   return function(){
      alert( param );//<------Your code here
   }
}

если мы сделаем:

some_button.onclick = foo( some_param );
function foo( param ){
    alert( param );
}

затем функция foo запускается после каждой страницы обновления.

если мы сделаем:

for( let i = 0; i < 10; ++i ){
    var inputElement = document.createElement('input');
    inputElement.type = "button"
    inputElement.addEventListener('click', function(){
        gotoNode(result.name);
    });

   document.body.appendChild(inputElement);
}

затем для всех кнопок, созданных в цикле, последнее значение параметра "result.name"

Ответ 16

если вы используете asp, вы можете использовать javascript:

HTML:

<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"

Javascript:

function EditSelectedOptionName(id, name) {
        console.log(id);
        console.log(name);
 }

Ответ 17

Если вы добавляете кнопку или ссылку динамически и сталкиваетесь с проблемой, то это может помочь. Я решил таким образом.

var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');

Я новичок в HTML, JQuery и JS. Поэтому, возможно, мой код не будет оптимизирован или синтаксис, но он работал для меня.

Ответ 18

    <style type="text/css">
        #userprofile{
              display: inline-block;
              padding: 15px 25px;
              font-size: 24px;
              cursor: pointer;
              text-align: center;
              text-decoration: none;
              outline: none;
              color: #fff;
              background-color: #4CAF50; //#c32836
              border: none;
              border-radius: 15px;
              box-shadow: 0 9px #999;
              width: 200px;
              margin-bottom: 15px;

        }
        #userprofile:hover {
            background-color: #3e8e41
        }
        #userprofile:active {
              background-color: #3e8e41;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
        }
        #array {
                border-radius: 15px 50px;
                background: #4a21ad;
                padding: 20px;
                width: 200px;
                height: 900px;
                overflow-y: auto;
            }

    </style>
if(data[i].socketid!=""){
$("#array").append("<button type='button'  id='userprofile' class='green_button' name="+data[i]._id+" onClick='chatopen(name)'>"+data[i].username+"</button></br>");                    
                }else{
                    console.log('null socketid  >>', $("#userprofile").css('background-color')); 
                    //$("#userprofile").css('background-color','#c32836 ! important');


$("#array").append("<button type='button'  id='userprofile' class='red_button' name="+data[i]._id+" onClick='chatopen(name)'>"+data[i].username+"</button></br>");  
                $(".red_button").css('background-color','#c32836');             
                }

Ответ 19

Вы можете использовать этот код в файле JavaScript для добавления кнопки:

<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>

Ответ 20

Следующее работает для меня очень хорошо,

<html>
<head>
    <title>HTML Form</title>
</head>
<body>
    <form>
        <input type="button" value="ON" onclick="msg('ON')">
        <input type="button" value="OFF" onclick="msg('OFF')">
    </form>
    <script>
        function msg(x){
            alert(x);
        }
    </script>
</body>
</html>