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 ....)를 가질 수 있다는 것입니다.
invoke. 버튼을 클릭해도 호출되지 않습니다.
JSON.stringify(obj)HTML과 JSON.parse(event.target.getAttribute('data-arg'))JavaScript 계층에서 사용하십시오
HTML onclick처리기를 사용하지 말고 같은 일반적인 것을 사용하는 것이 좋습니다 document.getElementById.
HTML :
<input type="button" id="nodeGoto" />자바 스크립트 :
document.getElementById("nodeGoto").addEventListener("click", function() {
gotoNode(result.name);
}, false);onclick함수가 아니라 함수를 할당해야하는 속성입니다.....onclick = function() {...};
이 시도..
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') 기호 사이에 인수를 보내야합니다.
또한 문자열에 억음 기호 (`)를 사용합니다
시도 :
`<input type="button" onClick="gotoNode('${result.name}')" />`자세한 내용은 MDN 및 Stackoverflow를 방문하십시오.
Chrome에서는 Edge, Firefox (Gecko), Opera, Safari를 지원하지만 Internet Explorer는 지원하지 않습니다.
버튼이 동적으로 생성되는 경우 :
아래 코드와 같이 문자열 매개 변수를 자바 스크립트 함수에 전달할 수 있습니다.
세 번째 매개 변수가 문자열 매개 변수 인 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);
}편집 : 요구 사항이 HTML 코드에서 전역 객체 (js)를 참조 해야하는 경우이를 시도 할 수 있습니다. [변수 주위에 따옴표 ( '또는 ")를 사용하지 마십시오]
바이올린 참조.
자바 스크립트 :
var result = {name: 'hello'};
function gotoNode(name) {
alert(name);
}HTML :
<input value="Hello" type="button" onClick="gotoNode(result.name)" />다음은 내가 사용하는 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>핸들러 매개 변수가 다른 버튼 세트를 생성하는 데 사용하는 경우 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"매개 변수의 마지막 값
버튼이나 링크를 동적으로 추가하고 문제가 발생하면 도움이 될 수 있습니다. 이 방법으로 해결했습니다.
var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');HTML, JQuery 및 JS를 처음 사용합니다. 내 코드가 최적화되지 않았거나 구문이 아닐 수도 있지만 효과가있었습니다.
Razor에서는 매개 변수를 동적으로 전달할 수 있습니다. @ Model.UnitNameVMs [i] .UnitNameID
<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');
}다음은 매우 잘 작동합니다.
<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>