온 클릭 함수에서 문자열 매개 변수 전달
Onclick 함수에 매개 변수 (예 : 문자열)를 전달하고 싶습니다. 현재로서는 이렇게합니다.
'<input type="button" onClick="gotoNode(' + result.name + ')" />'
예를 들어 문자열 "Add"와 같은 result.name을 사용하십시오. 이 버튼을 클릭하면 추가가 정의되지 않았다는 오류가 발생합니다. 이 함수 호출은 숫자 매개 변수와 완벽하게 작동하므로 문자열의 ""기호와 관련이 있다고 가정합니다. 아무도 전에이 문제가 있었습니까?
문자열에서 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에서 문자열 이스케이프를 사용하는 것과 관련하여 몇 가지 우려가 있으며 인수 수가 증가함에 따라 유지 관리가 번거로울 수 있습니다.
다음 접근 방식에는 클릭 한 번으로 한 번의 홉이 있습니다. 이벤트 객체를 기반으로 핸들러 메소드 및 핸들러 메소드를 제어하여 클릭 이벤트 및 해당 오브젝트를 공제 할 수 있습니다.
또한 더 많은 인수를 추가하고 더 유연하게 사용할 수있는 더 확실한 방법을 제공합니다.
<button type="button"
className="btn btn-default"
onClick="invoke"
name='gotoNode'
data-arg1='1234'>GotoNode</button>
자바 스크립트 레이어에서 :
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" />
자바 스크립트 :
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>
자바 스크립트 :
<script language="javascript" type="text/javascript">
function a1_onclick(id) {
document.getElementById(id).style.backgroundColor = "#F00";
}
</script>
참고 : HTML 코드에서 ''와 같은 ( 'a1') 기호 사이에 인수를 보내야합니다.
여러 매개 변수 :
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>'
);
편집 : 요구 사항이 HTML 코드에서 전역 객체 (js)를 참조 해야하는 경우이를 시도 할 수 있습니다. [변수 주위에 따옴표 ( '또는 ")를 사용하지 마십시오]
바이올린 참조.
자바 스크립트 :
var result = {name: 'hello'};
function gotoNode(name) {
alert(name);
}
HTML :
<input value="Hello" type="button" onClick="gotoNode(result.name)" />
버튼이 동적으로 생성되는 경우 :
아래 코드와 같이 문자열 매개 변수를 자바 스크립트 함수에 전달할 수 있습니다.
세 번째 매개 변수가 문자열 매개 변수 인 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}')" />`
for more information visit MDN and Stackoverflow
By Chrome,Edge,Firefox (Gecko),Opera,Safari support,but not support Internet Explorer.
Here is a Jquery solution what I'm using.
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>
You can pass refrence or string value just put function inside the doube commas "" asp below snapshot
For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '
var str= "'"+ str+ "'";
For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '
var str= "'"+ str+ "'";
the same parameter you can pass to the onclick() event.In most of the cases it works with every browser.
if to use for generation of a set of buttons with different parameters of handlers. 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
}
}
if we do:
some_button.onclick = foo( some_param );
function foo( param ){
alert( param );
}
then function foo start after every updating page.
if we do:
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);
}
then for all buttons created in the loop, the last value of the parameter "result.name"
if you are using asp you can use javascript:
HTML:
<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"
Javascript:
function EditSelectedOptionName(id, name) {
console.log(id);
console.log(name);
}
If you are adding button or link dynamically and facing the issue then this may be help. I solved by this way.
var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');
I am new to HTML, JQuery and JS. So may be my code will not be optimized or syntax, but it was working for me.
<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');
}
You can use this code in JavaScript file to add button:
<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>
The following works for me very well,
<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>
참고URL : https://stackoverflow.com/questions/9643311/pass-string-parameter-in-an-onclick-function
'IT story' 카테고리의 다른 글
| 사전에 새 항목을 추가하거나 기존 항목을 업데이트하는 방법 (0) | 2020.05.09 |
|---|---|
| 소스 파일 끝에 빈 줄을 두는 것이 왜 권장됩니까? (0) | 2020.05.09 |
| Mockito를 사용하여 추상 클래스 테스트 (0) | 2020.05.08 |
| SQLAlchemy IN 절 (0) | 2020.05.08 |
| MVC 4 @Scripts“존재하지 않습니다” (0) | 2020.05.08 |