ผ่านพารามิเตอร์สตริงในฟังก์ชั่น onclick

225

ฉันต้องการส่งผ่านพารามิเตอร์ (เช่นสตริง) ไปยังฟังก์ชัน Onclick ในตอนนี้ฉันทำสิ่งนี้:

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

กับ result.name ตัวอย่างเช่นเท่ากับสตริง "เพิ่ม" เมื่อฉันคลิกที่ปุ่มนี้ฉันมีข้อผิดพลาดที่แจ้งว่า Add ไม่ได้ถูกกำหนดไว้ เนื่องจากฟังก์ชันนี้ใช้งานได้ดีกับพารามิเตอร์ตัวเลขฉันจึงคิดว่ามันมีบางอย่างที่เกี่ยวข้องกับสัญลักษณ์ "" ในสตริง ไม่มีใครเคยมีปัญหานี้มาก่อนหรือไม่

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จะเปลี่ยนไปก่อนที่เหตุการณ์จะเริ่มขึ้นและคุณต้องสร้างฟองขอบเขตเพิ่มเติมเพื่อทำเงาตัวแปรที่เปลี่ยนแปลง

— david
แหล่งที่มา
7
การจัดรูปแบบของสัญลักษณ์นี้ใช้งานได้ดีมากขอบคุณ
— JasperTack
2
สวัสดี @ david .. ฉันมีข้อสงสัยอย่างหนึ่ง ... ฉันต้องการผ่านการโต้แย้งหลายครั้งใน onclick.. เป็นไปได้ไหม? คุณสามารถทำประโยชน์ให้ฉันได้ไหม ..
— VIVEK-MDU
2
@ david ขอบคุณมันแก้ไขปัญหาพารามิเตอร์สตริงของฉัน แต่ตอนนี้ฉันต้องผ่าน (สตริงบูลีน) จะทำอะไรเพื่อสิ่งนั้น
— Zaveed Abbasi
1
ขอบคุณมันช่วยฉันได้จริงๆ :)
— Hitesh
2
@ David: คุณสามารถบอกได้นิด ๆ หน่อย ๆ ทำไมเราต้องเพิ่มรอบพูดว่า
— Hitesh
34

ความกังวลสำหรับฉันเกี่ยวกับการใช้ string escape ใน onClick และเมื่อจำนวนอาร์กิวเมนต์เพิ่มขึ้นมันจะยุ่งยากในการรักษา

วิธีการต่อไปนี้จะมีหนึ่ง hop - เมื่อคลิก - ใช้การควบคุมไปยังวิธีการจัดการและวิธีการจัดการขึ้นอยู่กับวัตถุเหตุการณ์ที่สามารถหักเหตุการณ์คลิกและวัตถุที่สอดคล้องกัน

นอกจากนี้ยังมีวิธีที่สะอาดกว่าในการเพิ่มอาร์กิวเมนต์เพิ่มเติมและมีความยืดหยุ่นมากขึ้น

<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 .... ) ตามต้องการ

— กฤษณ์สาราม
แหล่งที่มา
2
ฉันประหลาดใจที่นี่ไม่ได้เพิ่มจำนวนผู้อัปโหลดมากนักเนื่องจากเป็นวิธีที่สะอาดกว่าในการส่งผ่านข้อโต้แย้งไปยังตัวจัดการเหตุการณ์
— Tim O'Brien
สิ่งนี้ใช้ไม่ได้ไม่invokeถูกเรียกเมื่อคุณคลิกที่ปุ่ม
— tanguy_k
สุดยอดทางออก! หากคุณจำเป็นต้องผ่านอาร์เรย์หรือวัตถุเพียงใช้JSON.stringify(obj)ใน HTML และJSON.parse(event.target.getAttribute('data-arg'))ในเลเยอร์ JavaScript
— leonheess
@SairamKrish ในกรณีของฉันถ้าฉันคลิกที่ปุ่มฉันได้ตั้งรหัสแสดงภาพหน้าจอ: snag.gy/7bzEWN.jpg รหัส: pastiebin.com/5d35674e2fc31
— อัญมณี
สิ่งนี้อาจใช้งานได้ แต่เป็นการใช้งานที่ผิดปรกติซึ่งเป็นการยากที่จะติดตามนักพัฒนารายอื่นที่จำเป็นต้องดูแลรักษา
— Spencer Sullivan
24

ผมขอแนะนำให้ไม่ได้ใช้ HTML ขนย้ายและการใช้งานบางสิ่งบางอย่างร่วมกันมากขึ้นเช่นonclickdocument.getElementById

HTML:

<input type="button" id="nodeGoto" />

JavaScript:

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);
— kevinji
แหล่งที่มา
onclickไม่ใช่ฟังก์ชั่นมันเป็นคุณสมบัติที่คุณต้องกำหนดฟังก์ชั่นให้กับ:....onclick = function() {...};
— Felix Kling
@ FelixKling ขอบคุณสำหรับสิ่งนั้นหัวของฉันยังคงอยู่ในโหมด jQuery
— kevinji
4
คุณกำลังสมมติว่าจะมีเพียงหนึ่งในอินพุตเหล่านี้
— Madbreaks
คำถามของ OP ก็หมายความว่าจะมีเพียงหนึ่งอินพุตเท่านั้น
— kevinji
ฉันคิดว่าตัวเลือกนี้ใช้งานไม่ได้สำหรับฉันเพราะฉันสร้างหลายปุ่มเนื่องจากการค้นหา ฉันสามารถแก้ปัญหานี้ได้โดยใช้ตัวนับเพื่อเพิ่มรหัส แต่ฉันต้องการให้มันง่ายและเก็บไว้ในบรรทัด
— 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
ใครช่วยได้บ้าง ในกรณีของฉันถ้าฉันคลิกปุ่มฉันได้ตั้งค่าให้แสดง id ภาพหน้าจอ: 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

ถ้าปุ่มของคุณถูกสร้างแบบไดนามิก:

คุณสามารถส่งพารามิเตอร์สตริงไปยังฟังก์ชันจาวาสคริปต์เช่นรหัสด้านล่าง:

ฉันผ่านพารามิเตอร์ 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);
}
— 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? like ... var result = {name: 'javascript'};
— Sandeep GB
ผลมีบันทึกจากห้องสมุด jowl: มันเป็นโครงสร้าง json ที่มีชื่อคุณลักษณะประเภท ...
— JasperTack
Jaspack ฉันได้อัพเดตคำตอบแล้ว มันทำงานให้คุณตอนนี้หรือไม่
— Sandeep GB
ขอบคุณสำหรับตัวอย่าง แต่นั่นไม่ได้ผลในกรณีของฉัน: ตัวแปรผลลัพธ์ไม่ใช่โกลบอล แต่เป็นตัวแปรภายในโพรซีเดอร์ ดังนั้นเมื่อฉันเรียกใช้ฟังก์ชันด้วย result.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>'
    );
— Zahid Rahman
แหล่งที่มา
2

สำหรับการส่งพารามิเตอร์หลายตัวคุณสามารถส่งสตริงโดยต่อเชื่อมกับค่า ASCII เช่นสำหรับเครื่องหมายคำพูดเดี่ยวที่เราสามารถใช้ '

var str= "&#39;"+ str+ "&#39;";
— นาย Talha
แหล่งที่มา
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

คุณสามารถผ่านการรีเฟรชหรือค่าสตริงได้เพียงใส่ฟังก์ชั่นไว้ในสแน็ปช็อตของ doube จุลภาค ""

ป้อนคำอธิบายรูปภาพที่นี่

— Abdul Khaliq
แหล่งที่มา
0

สำหรับการส่งพารามิเตอร์หลายตัวคุณสามารถส่งสตริงโดยเชื่อมโยงมันเข้ากับค่า ASCII เช่นสำหรับเครื่องหมายคำพูดเดี่ยวที่เราสามารถใช้ได้ &#39;

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 เริ่มหลังจากทุกหน้าการอัพเดต

ถ้าเราทำ:

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);
 }
— Abdullah Tahan
แหล่งที่มา
0

หากคุณกำลังเพิ่มปุ่มหรือลิงค์แบบไดนามิกและประสบปัญหานี้อาจเป็นประโยชน์ ฉันแก้ไขด้วยวิธีนี้

var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');

ฉันใหม่สำหรับ HTML, JQuery และ JS ดังนั้นอาจเป็นรหัสของฉันจะไม่ได้รับการเพิ่มประสิทธิภาพหรือไวยากรณ์ แต่มันก็ใช้ได้สำหรับฉัน

— Avinash Verma
แหล่งที่มา
0

คุณสามารถใช้สิ่งนี้

'<input id="test" type="button" value="' + result.name + '" />'

$(document)..on('click', "#test", function () {
        alert($(this).val());
});

มันทำงานให้ฉัน

— Agung Panduan
แหล่งที่มา
-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');             
                }
— Jay Jariwala
แหล่งที่มา
โปรดอธิบายรหัสของคุณคำตอบนี้ไม่ได้มีประโยชน์
— Phil Hudson
-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>
— Sayan Shankhari
แหล่งที่มา
1
OP ไม่ได้ถามเกี่ยวกับค่าคงที่ นี่ไม่ได้ตอบคำถาม
— RubioRic
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.