передавати параметр рядка у функції onclick

225

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

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

з результатом.name, наприклад, рівним рядку "Додати". Коли я натискаю на цю кнопку, у мене з’являється помилка, яка говорить про те, що Додати не визначено. Оскільки цей виклик функції ідеально працює з числовим параметром, я припускаю, що він має щось спільне із символами "" в рядку. Хтось раніше мав цю проблему?

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

Привіт @ david..У мене є сумніви ... Я хочу передати кілька аргументів у тому onclick .. як це можливо? ти можеш зробити корисне для мене ..?

— VIVEK-MDU

2

@ david, дякую, це вирішило мою проблему з параметрами рядка, але тепер я повинен пройти (string, boolean). що для цього робити?

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

1

Дякую, мені це дуже допомогло :)

— Хітеш

2

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

— Hitesh

34

Пару занепокоєнь для мене щодо використання рядкового стрибка в 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 
    })
  }

Перевага тут полягає в тому, що ми можемо мати стільки аргументів (у наведеному вище прикладі, дані-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 код: 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);

— кевінджі
джерело

onclick не є функцією, це властивість, якій ви повинні призначити функцію: ....onclick = function() {...};

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

@FelixKling Дякую за це, моя голова все ще знаходиться в режимі jQuery.

— кевінджі

4

Ви припускаєте, що буде лише один із цих входів.

— Madbreaks

Ну і питання ОП означає, що буде лише один вхід.

— kevinji

Я думаю, що ця опція для мене не працює, оскільки в результаті пошукової операції генерується кілька кнопок. Я міг би вирішити це за допомогою лічильника, щоб додати його до ідентифікатора, але я хочу зробити його простим і тримати його в Inline

— 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 код: pastiebin.com/5d35674e2fc31

— Gem

6

також ви використовуєте символ рядкового наголосу (`) у рядку

спробуйте:

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

для отримання додаткової інформації відвідайте MDN та Stackoverflow

Підтримка Chrome, Edge, Firefox (Gecko), Opera, Safari, але не підтримує Internet Explorer.

— MJ Vakili
джерело

6

якщо ваша кнопка генерується динамічно:

Ви можете передати рядкові параметри до функцій javascript, таких як код нижче:

Я передав 3 параметри, де третій - це параметр string, сподіваюся, що це допомагає.

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)" />

— Sandeep GB
джерело

Я отримую помилку, коли пробую це рішення: частина "+ result.name +" використовується як рядок у цьому випадку

— JasperTack

що таке "результат" об'єкт? Це глобальна змінна, оголошена в JS? як ... var result = {name: 'javascript'};

— Sandeep GB

Результат містить запис з бібліотеки jowl: це json-структура з атрибутами ім'я, тип, ...

— JasperTack

Jaspack, я оновив відповідь. Це працює для вас зараз?

— Sandeep GB

Дякую за приклад, але в моєму випадку це не працює: змінна результат не є глобальною, а є змінною в межах процедури. Тож коли я називаю функцію з результатом name.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

Ви можете передати значення рефреш або значення рядка, просто поставивши функцію всередині подвійних косів під "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 start після кожної сторінки оновлення.

якщо ми:

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

— Gadir Farzaneh
джерело

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>

— Дух розчину
джерело