Я хотел бы передать параметр (т.е. строку) в функцию Onclick. На данный момент я делаю это:
'<input type="button" onClick="gotoNode(' + result.name + ')" />'
с result.name, например, равным строке "Добавить". Когда я нажимаю на эту кнопку, у меня есть ошибка, которая говорит, что Add не определен. Поскольку этот functioncall работает отлично с числовым параметром, я предполагаю, что он имеет какое-то отношение к символам "" в строке. Кто-нибудь имел эту проблему раньше?
Похоже, вы строите элементы 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 изменится до того, как событие сработает, и вам потребуется создать дополнительный пузырь области действия, чтобы скрыть изменяющуюся переменную.
Несколько проблем для меня касаются использования 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....), сколько необходимо.
Я предлагаю даже не использовать обработчики HTML onclick и использовать что-то более общее, например document.getElementById.
HTML:
<input type="button" id="nodeGoto" />
JavaScript:
document.getElementById("nodeGoto").addEventListener("click", function() {
gotoNode(result.name);
}, false);
Я предполагаю, что вы создаете кнопку, используя сам JavaScript. Таким образом, ошибка в вашем коде заключается в том, что она будет отображать в этой форме
<input type="button" onClick="gotoNode(add)" />'
В этом текущем состоянии add будет рассматриваться как идентификатор, например, переменные или вызовы функций. Вы должны избегать значения, подобного этому
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
Это хороший и опрятный способ отправки значения или объекта.
<!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>
Попробуйте это.
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-коде
Несколько параметров:
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>'
);
Отредактировано: Если требование заключается в ссылке на глобальный объект (js) в вашем HTML-коде, вы можете попробовать это. [Не используйте кавычки ('или ") вокруг переменной]
Fiddle ссылка.
JavaScript:
var result = {name: 'hello'};
function gotoNode(name) {
alert(name);
}
HTML:
<input value="Hello" type="button" onClick="gotoNode(result.name)" />
если ваша кнопка генерируется динамически:
Вы можете передавать строковые параметры в функции 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);
}
также вы используете символ серьезного акцента (`) в строке
попробуйте:
`<input type="button" onClick="gotoNode('${result.name}')" />`
для получения дополнительной информации посетите MDN и fooobar.com/questions/42903/...
Chrome, Edge, Firefox (Gecko), Opera, Safari поддерживают, но не поддерживают Internet Explorer.
Вот решение 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">❮</button>
<button class="right" value="next">❯</button>
</div>
Вы можете передать refrence или string value только функцию put внутри запятой doube "" asp ниже моментального снимка
Для передачи нескольких параметров вы можете передать строку, объединив ее со значением ASCII, например, для одинарных кавычек мы можем использовать '
var str= "'"+ str+ "'";
Для передачи нескольких параметров вы можете передать строку, объединив ее с помощью значения ASCII, например, для одинарных кавычек мы можем использовать '
var str= "'"+ str+ "'";
тот же параметр, который вы можете передать в событие onclick(). В большинстве случаев он работает с каждым браузером.
если использовать для генерации набора кнопок с разными параметрами обработчиков. 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"
если вы используете asp, вы можете использовать javascript:
HTML:
<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"
Javascript:
function EditSelectedOptionName(id, name) {
console.log(id);
console.log(name);
}
Если вы добавляете кнопку или ссылку динамически и сталкиваетесь с проблемой, то это может помочь. Я решил таким образом.
var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');
Я новичок в HTML, JQuery и JS. Поэтому, возможно, мой код не будет оптимизирован или синтаксис, но он работал для меня.
<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');
}
Вы можете использовать этот код в файле JavaScript для добавления кнопки:
<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>
Следующее работает для меня очень хорошо,
<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>