एक ऑनक्लिक फ़ंक्शन में स्ट्रिंग पैरामीटर पास करें

Question

मैं ऑनक्लिक फ़ंक्शन के लिए एक पैरामीटर (यानी एक स्ट्रिंग) पास करना चाहूंगा। फिलहाल, मैं यह करता हूं:

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

result.name के साथ स्ट्रिंग "एड" के बराबर उदाहरण के लिए। जब मैं इस बटन पर क्लिक करता हूं, तो मेरे पास एक त्रुटि है जो कहती है कि ऐड परिभाषित नहीं है। चूंकि यह फ़ंक्शनकॉल एक संख्यात्मक पैरामीटर के साथ एकदम सही काम करता है, इसलिए मैं मानता हूं कि इसे स्ट्रिंग में प्रतीकों "" के साथ कुछ करना है। क्या किसी को भी पहले यह समस्या थी?

Comments

यह इस मामले में बेहतर हो सकता है कि केवल इनलाइन इवेंट हैंडलर का उपयोग न करें।

— फेलिक्स क्लिंग

आपकी समस्या ठीक से चर नहीं होने के कारण है। मेरे जवाब की

— Starx

Answer 1

ऐसा लगता है कि आप स्ट्रिंग से 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तो घटना की आग से पहले बदल जाएगा और आपको बदलते चर को छाया देने के लिए एक अतिरिक्त गुंजाइश बबल बनाने की आवश्यकता होगी।

Comments

प्रतीकों का यह प्रारूपण काम करता है, इसलिए बहुत-बहुत धन्यवाद

— जैस्परटैक

हाय @ दाविद..मुझे एक संदेह है ... मैं उस ऑन्कलिक में कई तर्क पारित करना चाहता हूं..यह कैसे संभव है? क्या आप मेरे लिए उपयोगी बना सकते हैं ..?

— VIVEK-MDU

@ डेविड, धन्यवाद, इसने मेरे स्ट्रिंग पैरामीटर समस्या को हल किया लेकिन अब मुझे (स्ट्रिंग, बूलियन) पास करना होगा। उसके लिए क्या करें?

— अब्बासी

धन्यवाद, इसने वास्तव में मेरी मदद की :)

— हितेश

@ दाविद: क्या आप थोड़ा बता सकते हैं कि हमें इसके बारे में उद्धरण जोड़ने की आवश्यकता क्यों है

— हितेश

Answer 2

मेरे लिए कुछ चिंताएँ हैं कि ऑन-स्टिक में स्ट्रिंग एस्केप का उपयोग करने के संबंध में और तर्कों की संख्या बढ़ने के साथ, यह बनाए रखना बोझिल हो जाएगा।

निम्नलिखित दृष्टिकोण में एक हॉप होगा - क्लिक करने पर - नियंत्रण को हैंडलर विधि और हैंडलर विधि पर ले जाएं, जो ईवेंट ऑब्जेक्ट के आधार पर, क्लिक ईवेंट और संबंधित ऑब्जेक्ट को घटा सकता है।

यह अधिक तर्कों को जोड़ने और अधिक लचीलेपन के लिए एक क्लीनर तरीका भी प्रदान करता है।

<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 
    })
  }

यहाँ लाभ यह है कि हमें आवश्यकतानुसार कई तर्क (उदाहरण के लिए, डेटा- arg1, डेटा- arg2 ....) हो सकते हैं।

Comments

मुझे आश्चर्य है कि यह अधिक अपवित्र नहीं हो रहा है क्योंकि यह एक घटना हैंडलर को तर्क देने की क्लीनर विधि है।

— टिम ओ'ब्रायन

invokeजब आप बटन पर क्लिक करते हैं तो यह काम नहीं करता है, इसे नहीं कहा जाता है

— tanguy_k

महान समाधान! यदि आपको केवल JSON.stringify(obj)HTML और JSON.parse(event.target.getAttribute('data-arg'))जावास्क्रिप्ट-लेयर में Arrays या ऑब्जेक्ट्स को पास करने की आवश्यकता है

— leonheess

@SairamKrish मेरे मामले में, अगर मैं उस बटन पर क्लिक करता हूं जिसे मैंने आईडी, स्क्रीनशॉट दिखाने के लिए सेट किया है: स्क्रीनशॉट: snag.gy/7bzEWN.jpg कोड: pastiebin.com/5d35674e2fc31

— Gem

यह काम कर सकता है, लेकिन यह एक लाजिमी है, असामान्य कार्यान्वयन जो इसे बनाए रखने के लिए आवश्यक किसी अन्य डेवलपर के लिए अनुसरण करना कठिन होगा।

— स्पेन्सर सुलिवन

Answer 3

मेरा सुझाव है कि एचटीएमएल onclickहैंडलर का उपयोग न करें, और कुछ सामान्य जैसे कि का उपयोग करें document.getElementById।

HTML:

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

जावास्क्रिप्ट:

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);

Comments

onclickएक फ़ंक्शन नहीं है, यह एक संपत्ति है जिसे आपको एक फ़ंक्शन असाइन करना है:....onclick = function() {...};

— फेलिक्स क्लिंग

@FelixKling उस के लिए धन्यवाद, मेरे सिर अभी भी jQuery मोड में है।

— केविनजी

आप मान रहे हैं कि इनमें से सिर्फ एक इनपुट होगा।

— मैडब्रेक्स

वैसे ओपी का सवाल है कि केवल एक इनपुट होगा।

— केविनजी

मुझे लगता है कि यह विकल्प मेरे लिए काम नहीं करता है, क्योंकि मैं एक खोज-ऑपरेशन के परिणामस्वरूप कई बटन उत्पन्न करता हूं। मैं आईडी में जोड़ने के लिए एक काउंटर का उपयोग करके इसे हल कर सकता हूं, लेकिन मैं इसे सरल रखना चाहता हूं और इसे इनलाइन रखना चाहता हूं

— जैस्परटैक

Answer 4

मैं अनुमान लगा रहा हूं, आप स्वयं जावास्क्रिप्ट का उपयोग करके एक बटन बना रहे हैं। तो, आपके कोड में त्रुटि यह है, यह इस रूप में प्रस्तुत करेगा

<input type="button" onClick="gotoNode(add)" />'

इस वर्तमान स्थिति में, addचर या फ़ंक्शन कॉल की तरह एक पहचानकर्ता के रूप में माना जाएगा। आपको इस तरह से मूल्य से बचना चाहिए

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

Answer 5

मूल्य या वस्तु भेजने का यह एक अच्छा और साफ-सुथरा तरीका है।

<!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>

Answer 6

इसे इस्तेमाल करे..

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 ') जैसे' 'संकेतों के बीच तर्क भेजना सुनिश्चित करें

Comments

धन्यवाद!! कुछ घंटों के लिए इस संभावना की तलाश में है

— cweitat

क्या कोई मदद करता है? मेरे मामले में, यदि मैं आईडी, स्क्रीनशॉट प्रदर्शित करने के लिए सेट किए गए बटन पर क्लिक करता हूं, तो स्क्रीनशॉट: snag.gy/7bzEWN.jpg कोड: pastiebin.com/5d35674e2fc31

— Gem

Answer 7

आप स्ट्रिंग में गंभीर उच्चारण चिह्न (`) का भी उपयोग करते हैं

प्रयत्न :

`<input type="button" onClick="gotoNode('${result.name}')" />`

अधिक जानकारी के लिए MDN और Stackoverflow पर जाएँ

क्रोम, एज, फ़ायरफ़ॉक्स (गेको), ओपेरा, सफारी का समर्थन करते हैं, लेकिन इंटरनेट एक्सप्लोरर का समर्थन नहीं करते हैं।

Answer 8

यदि आपका बटन गतिशील रूप से उत्पन्न होता है:

आप नीचे दिए गए कोड जैसे जावास्क्रिप्ट कार्यों के लिए स्ट्रिंग पैरामीटर पास कर सकते हैं:

मैंने 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);
}

Comments

अच्छा, साफ और सरल। धन्यवाद

Answer 9

---

संपादित: यदि आवश्यकता अपने HTML कोड में वैश्विक ऑब्जेक्ट (js) को संदर्भित करने के लिए है, तो आप यह कोशिश कर सकते हैं। [चर के आसपास किसी भी उद्धरण ('या ") का उपयोग न करें]

बेला संदर्भ।

जावास्क्रिप्ट:

var result = {name: 'hello'};
function gotoNode(name) {
    alert(name);
}

HTML:

<input value="Hello" type="button" onClick="gotoNode(result.name)" />​

Comments

जब मैं इस समाधान को आज़माता हूं तो मुझे एक त्रुटि मिलती है: इस मामले में स्ट्रिंग "+ result.name +" का उपयोग स्ट्रिंग के रूप में किया जाता है

— जैस्परटैक

"परिणाम" वस्तु क्या है? क्या यह JS में घोषित किया गया एक वैश्विक चर है? जैसे ... var result = {name: 'जावास्क्रिप्ट'};

— संदीप GB

परिणाम में jowl लाइब्रेरी का रिकॉर्ड होता है: यह एक json-structure है जिसमें गुण नाम, प्रकार, ...

— JasperTack

जसपैक, मैंने जवाब अपडेट कर दिया है। क्या यह अब आपके लिए काम करता है?

— संदीप GB

उदाहरण के लिए धन्यवाद, लेकिन यह मेरे मामले में काम नहीं करता है: परिणाम चर वैश्विक नहीं है, लेकिन एक प्रक्रिया के भीतर एक चर है। इसलिए जब मैं result.name के साथ फ़ंक्शन को कॉल करता हूं, तो परिणाम ज्ञात नहीं है

— JasperTack

Answer 10

एकाधिक पैरामीटर:

   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>'
    );

Answer 11

कई मापदंडों से गुजरने के लिए आप इसे ASCII मान के साथ बदलकर स्ट्रिंग कास्ट कर सकते हैं, जैसे एकल उद्धरणों के लिए हम इसका उपयोग कर सकते हैं '

var str= "'"+ str+ "'";

Answer 12

यहाँ एक Jquery समाधान है जो मैं उपयोग कर रहा हूँ।

jQuery

$("#slideshow button").click(function(){
    var val = $(this).val();
    console.log(val);
});

एचटीएमएल

<div id="slideshow">
    <img src="image1.jpg">
    <button class="left" value="back">&#10094;</button>
    <button class="right" value="next">&#10095;</button>
</div>

Answer 13

आप refrence या string value को पास कर सकते हैं बस doube commas के अंदर फंक्शन डाल दें "" नीचे स्नैपशॉट

Answer 14

कई मापदंडों को पारित करने के लिए आप ASCII मान के साथ इसे समाहित करके स्ट्रिंग कास्ट कर सकते हैं, जैसे एकल उद्धरणों के लिए जिनका हम उपयोग कर सकते हैं '

var str= "'"+ str+ "'";

एक ही पैरामीटर आप onclick()ईवेंट में पास कर सकते हैं। अधिकांश मामलों में यह हर ब्राउज़र के साथ काम करता है।

Answer 15

यदि हैंडलर्स के विभिन्न मापदंडों के साथ बटन के एक सेट की पीढ़ी के लिए उपयोग करना है। 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 );
}

फिर हर अपडेट पेज के बाद फ्यु फ्यू शुरू करें।

यदि हम करें तो:

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"

Answer 16

यदि आप एस्प का उपयोग कर रहे हैं तो आप जावास्क्रिप्ट का उपयोग कर सकते हैं:

HTML:

<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"

जावास्क्रिप्ट:

function EditSelectedOptionName(id, name) {
        console.log(id);
        console.log(name);
 }

Answer 17

यदि आप गतिशील रूप से बटन या लिंक जोड़ रहे हैं और समस्या का सामना कर रहे हैं तो यह मदद हो सकती है। मैं इस तरह से हल किया।

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

मैं HTML, JQuery और JS के लिए नया हूं। तो हो सकता है कि मेरा कोड अनुकूलित या वाक्यविन्यास नहीं होगा, लेकिन यह मेरे लिए काम कर रहा था।

Answer 18

रेजर में, आप मापदंडों को गतिशील रूप से पास कर सकते हैं: @ Model.UnitNameVMs [i] .UnitNameID।

Answer 19

आप इसका उपयोग कर सकते हैं,

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

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

मेरे लिए इसका काम है

Answer 20

    <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');             
                }

Comments

कृपया अपना कोड स्पष्ट करें, यह उत्तर स्वयं उपयोगी नहीं है

— फिल हडसन

Answer 21

निम्नलिखित मेरे लिए बहुत अच्छा काम करता है,

<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>

Comments

ओपी लगातार मूल्य के बारे में नहीं पूछ रहा है। इस सवाल का जवाब नहीं है।

— रूबिरिक

Answer 22

आप इस कोड का उपयोग अपने बटन ऑनक्लिक विधि में कर सकते हैं:

<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>