передать строковый параметр в функцию onclick

225

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

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

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

javascript html

— JasperTack
источник

1

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

— Феликс Клинг

1

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

— Starx

351

Похоже, вы строите элементы 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виду, что, если это цикл или что-то еще, он изменится до того, как событие сработает, и вам потребуется создать дополнительный пузырь области действия, чтобы скрыть изменяющуюся переменную.

— Дэвид
источник

7

Такое форматирование символов работает, поэтому большое спасибо

— JasperTack

2

Привет @ Дэвид .. У меня есть одно сомнение ... Я хочу передать несколько аргументов в этом клике .. как это возможно? Вы можете сделать полезным для меня ..?

— Вивек-MDU

2

@ Давид, спасибо, это решило мою проблему со строковым параметром, но теперь я должен передать (string, boolean). что для этого сделать?

— Завид Аббаси

1

Спасибо, это действительно помогло мне :)

— Hitesh

2

@ david: можете ли вы рассказать немного, почему мы должны добавить цитату вокруг этого

— Hitesh

34

Несколько проблем для меня касаются использования 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 ....), сколько необходимо.

— Сайрам Криш
источник

2

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

— Тим О'Брайен

Это не работает, invokeне вызывается при нажатии на кнопку

— tanguy_k

Отличное решение! Если вам нужно передать массивы или объекты, просто используйте JSON.stringify(obj)в HTML и JSON.parse(event.target.getAttribute('data-arg'))в JavaScript-слое

— leonheess

@SairamKrish В моем случае, если я нажму на кнопку, которую я настроил для отображения идентификатора, снимок экрана: snag.gy/7bzEWN.jpg code: pastiebin.com/5d35674e2fc31

— Gem

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

— Спенсер Салливан

24

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

HTML:

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

JavaScript:

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

— kevinji
источник

onclickэто не функция, это свойство, которому вы должны назначить функцию:....onclick = function() {...};

— Феликс Клинг

@FelixKling Спасибо за это, моя голова все еще в режиме jQuery.

— Кевинджи

4

Вы предполагаете, что будет только один из этих входов.

— Madbreaks

Ну, вопрос ОП подразумевает, что будет только один вход.

— Кевинджи

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

— JasperTack

21

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

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

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

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

— Starx
источник

16

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

<!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>

— Зокаи Хамид
источник

8

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

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-коде.

— Mawardy
источник

Спасибо!! искал этот пробник для пары часов

— cweitat

Кто-нибудь помогает? В моем случае, если я нажму кнопку, которую я установил для отображения идентификатора, снимок экрана: snag.gy/7bzEWN.jpg code: pastiebin.com/5d35674e2fc31

— Gem

6

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

пытаться :

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

для получения дополнительной информации посетите MDN и Stackoverflow

Поддержка Chrome, Edge, Firefox (Gecko), Opera, Safari, но не поддержка Internet Explorer.

— М.Дж. Вакили
источник

6

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

Вы можете передавать строковые параметры в функции 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);
}

— MJVM
источник

1

Красиво, чисто и просто. Спасибо

5

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

Ссылка на скрипку .

Javascript:

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

HTML:

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

— Сандип ГБ
источник

Я получаю сообщение об ошибке, когда пытаюсь решить эту

— проблему:

что такое «результат» объекта? Это глобальная переменная, объявленная в JS? как ... var result = {name: 'javascript'};

— Sandeep GB

результат содержит запись из библиотеки jowl: это json-структура с атрибутами name, type, ...

— JasperTack

Jaspack, я обновил ответ. Это работает для вас сейчас?

— Сандип ГБ,

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

— JasperTack

4

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

   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>'
    );

— Захид Рахман
источник

2

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

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

— Мистер Талха
источник

2

Вот решение 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>

— DamianToczek
источник

1

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

введите описание изображения здесь

— Абдул Халик
источник

0

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

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

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

— PVIJAY
источник

0

если использовать для генерации набора кнопок с разными параметрами обработчиков. 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»

— Александр Боярчук
источник

0

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

HTML:

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

Javascript:

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

— Абдулла Тахан
источник

0

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

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

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

— Авинаш Верма
источник

0

В Razor вы можете передавать параметры динамически: @ Model.UnitNameVMs [i] .UnitNameID

— Гадир Фарзанех
источник

0

Вы можете использовать это,

'<input id="test" type="button" value="' + result.name + '" />'

$(document)..on('click', "#test", function () {
        alert($(this).val());
});

это работа для меня

— Агунг Пандуан
источник

-1

    <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');             
                }

— Джей Яривала
источник

Пожалуйста, объясните свой код, этот ответ сам по себе бесполезен

— Фил Хадсон

-1

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

<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>

— Саян Шанхари
источник

1

ОП не спрашивает о постоянной стоимости. Это не отвечает на вопрос.

— RubioRic

-1

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

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

— Решение Духа
источник