Onclick関数にパラメータ(文字列)を渡したい。今のところ、このようにしています:
'<input type="button" onClick="gotoNode(' + result.name + ')" />'
を、例えばresult.nameが文字列 "Add"と等しい場合に実行します。 このボタンをクリックすると、Addが定義されていないというエラーが出ます。このファンクションコールは数値パラメータでは完璧に動作するので、文字列の中の記号 ""と関係があるのだと思います。 どなたかこのような問題を経験された方はいらっしゃいますか?
文字列から 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
はイベントが発生する前に変化してしまうので、変化する変数をシャドウするために追加のスコープバブルを作成する必要があることに注意してください。
onClickで文字列エスケープを使用することに関する私にとっての懸念のカップル、および引数の数が増えるにつれて、維持するのが面倒になります。
次のアプローチには1ホップがあります-クリック時-コントロールをハンドラーメソッドに取り、ハンドラーメソッドはイベントオブジェクトに基づいてクリックイベントと対応するオブジェクトを差し引くことができます。
また、より多くの引数を追加し、柔軟性を高めるためのよりクリーンな方法も提供します。
<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自体を使用してボタンを作成していると思います。 したがって、コードの error は、この形式でレンダリングされるということです。
<input type="button" onClick="gotoNode(add)" />'
この現在の状態では、「add」は変数や関数呼び出しのような識別子と見なされます。 このような値から逃れる必要があります。
'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'
これを試してみてください。.
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>'
);
文字列に墓アクセント記号( `)を使用します。
試す:
`<input type="button" onClick="gotoNode('${result.name}')" />`
詳細については、MDNおよびStackoverflowにアクセスしてください。
Chrome、Edge、Firefox(Gecko)、Opera、Safariのサポートにより、Internet Explorerはサポートされません。
編集しました: もし、HTMLコードの中でグローバルオブジェクト(js)を参照したいのであれば、次のようにしてください。[変数の周りには引用符('または")を使用しないでください]。
Fiddle][1]を参照してください。
Javascript:
var result = {name: 'hello'};
function gotoNode(name) {
alert(name);
}
HTML
<input value="Hello" type="button" onClick="gotoNode(result.name)" />
ボタンが動的に生成される場合:
文字列パラメータを以下のコードなどのJavaScript関数に渡すことができます。
3番目のパラメーターが文字列パラメーターである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);
}
これが私が使用している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>
スナップショットの下のdoube commas "" asp内に関数を置くだけで、refrenceまたはstring値を渡すことができます。
ボタンまたはリンクを動的に追加して問題に直面している場合、これは役立つ場合があります。 このようにして解決しました。
var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');
私はHTML、JQuery、JSを初めて使用しています。したがって、私のコードは最適化または構文されないかもしれませんが、私にとってはうまくいきました。
ハンドラーの異なるパラメーターを持つボタンのセットの生成に使用する場合。 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」の最後の値。
以下は私にとって非常にうまくいきます。
<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>
<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');
}