একটি অনক্লিক ফাংশনে স্ট্রিং প্যারামিটারটি পাস করুন


225

আমি একটি অনক্লিক ফাংশনে একটি প্যারামিটার (অর্থাত্ একটি স্ট্রিং) পাস করতে চাই। মুহুর্তের জন্য, আমি এটি করছি:

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

ফলাফলের সাথে উদাহরণস্বরূপ উদাহরণ "স্ট্রিং" যুক্ত করুন। আমি যখন এই বোতামটিতে ক্লিক করি তখন আমার একটি ত্রুটি ঘটে যা বলে যে অ্যাড সংজ্ঞায়িত করা হয়নি। যেহেতু এই ফাংশনকলটি একটি সংখ্যাসূচক প্যারামিটারের সাথে নিখুঁতভাবে কাজ করে, আমি ধরে নিয়েছি স্ট্রিংয়ের চিহ্নগুলির সাথে এটির কিছু আছে to কারও আগে কি এই সমস্যা ছিল?


1
এই ক্ষেত্রে সহজভাবে ইনলাইন ইভেন্ট হ্যান্ডলারগুলি না ব্যবহার করা ভাল।
ফেলিক্স ক্লিং

1
ভেরিয়েবলটি সঠিকভাবে পালাতে না পারার কারণে আপনার সমস্যা। পরীক্ষা করে দেখুন আমার উত্তর
Starx

উত্তর:


351

দেখে মনে হচ্ছে আপনি স্ট্রিং থেকে DOM উপাদান তৈরি করছেন। আপনাকে ফলাফলের নামের আশেপাশে কয়েকটি উদ্ধৃতি যুক্ত করতে হবে:

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

যদিও আপনার সঠিক ডিওএম পদ্ধতিতে সত্যই এটি করা উচিত।

var inputElement = document.createElement('input');
inputElement.type = "button"
inputElement.addEventListener('click', function(){
    gotoNode(result.name);
});

document.body.appendChild(inputElement);​

কেবল সচেতন হন যে এটি যদি একটি লুপ বা অন্য কিছু হয় resultতবে ঘটনাটি আগুনের আগেই পরিবর্তন হয়ে যায় এবং পরিবর্তিত পরিবর্তনশীলকে ছায়াতে আপনাকে অতিরিক্ত স্কোপ বুদ্বুদ তৈরি করতে হবে।


7
প্রতীকগুলির এই ফর্ম্যাটটি কাজ করে, তাই আপনাকে অনেক ধন্যবাদ
জ্যাস্পারট্যাক

2
হাই @ ডেভিড..আমার একটা সন্দেহ আছে ... আমি সেই অন্লিকে একাধিক যুক্তি পাস করতে চাই..এটা কী করে সম্ভব? আপনি কি আমার জন্য দরকারী করতে পারেন ..?
ভিভেক-এমডিউ

2
@ ডেভিড, ধন্যবাদ এটি আমার স্ট্রিং প্যারামিটার সমস্যার সমাধান করেছে তবে এখন আমাকে পাস করতে হবে (স্ট্রিং, বুলিয়ান)। তার জন্য কি করতে হবে?
জাভেদ আব্বাসি

1
ধন্যবাদ, এটি সত্যই আমাকে সাহায্য করেছিল :)
হিতেশ

2
@ ডেভিড: আপনি কি কিছুটা বলতে পারেন যে কেন আমাদের চারপাশে উক্তি যুক্ত করা দরকার
হিতেশ

34

অনক্লিকটিতে স্ট্রিং এস্কেপ ব্যবহার করার ক্ষেত্রে এবং আমার পক্ষে যুক্তিগুলির সংখ্যা বাড়ার সাথে সাথে দু'পক্ষের উদ্বেগগুলি বজায় রাখা জটিল হয়ে উঠবে।

নীচের পদ্ধতির একটি হপ থাকবে - ক্লিক ক্লিক করে - ইভেন্ট অবজেক্টের উপর ভিত্তি করে কোনও হ্যান্ডলার পদ্ধতি এবং হ্যান্ডলার পদ্ধতির নিয়ন্ত্রণ নিন, ক্লিক ইভেন্ট এবং সংশ্লিষ্ট অবজেক্টকে কর্তন করতে পারে।

এটি আরও যুক্তি যুক্ত করার এবং আরও নমনীয়তার জন্য একটি ক্লিনার উপায় সরবরাহ করে।

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

এখানে সুবিধাটি হ'ল আমাদের প্রয়োজনীয় হিসাবে যতগুলি আর্গুমেন্ট থাকতে পারে (উপরের উদাহরণস্বরূপ, ডেটা-আরগ 1, ডেটা-আরগ 2 ....)।


2
আমি আশ্চর্য হয়েছি এটি কোনও ইভেন্ট হ্যান্ডলারের কাছে তর্কগুলি পাস করার পরিষ্কার পদ্ধতি হওয়ায় এটি আরও বেশি অগ্রগতি পাচ্ছে না।
টিম ওব্রায়েন

এটি কার্যকর হয় না, invokeআপনি বোতামটি ক্লিক করার সময় বলা হয় না
tanguy_k

দুর্দান্ত সমাধান! আপনি অ্যারে পাস করতে হবে বা শুধু ব্যবহার অবজেক্টস যদি JSON.stringify(obj)HTML এ এবং JSON.parse(event.target.getAttribute('data-arg'))জাভাস্ক্রিপ্ট-স্তর
leonheess

@ সাইরামকিশ আমার ক্ষেত্রে, আমি আইডি, স্ক্রিনশট প্রদর্শন করার জন্য সেট করা বোতামটি ক্লিক করলে: snag.gy/7bzEWN.jpg কোড: pastiebin.com/5d35674e2fc31
রত্ন

এটি কার্যকর হতে পারে তবে এটি একটি গর্ভকালীন, অ্যাটিক্যাল বাস্তবায়ন যা এটি বজায় রাখতে অন্য কোনও বিকাশকারীকে অনুসরণ করা শক্ত hard
স্পেনসার সুলিভান

24

আমি এমনকি এইচটিএমএল onclickহ্যান্ডলারগুলি ব্যবহার না করার পরামর্শ দিই এবং আরও সাধারণ কিছু ব্যবহার করি যেমনdocument.getElementById

এইচটিএমএল:

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

javascript:

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

onclickকোনও ফাংশন নয়, এটি এমন একটি সম্পত্তি যা আপনাকে কোনও ফাংশন বরাদ্দ করতে হবে:....onclick = function() {...};
ফেলিক্স ক্লিং

@ ফেলিক্সক্লিং এর জন্য ধন্যবাদ, আমার মাথা এখনও jQuery মোডে রয়েছে।
কেভিনজি

4
আপনি ধরে নিচ্ছেন যে এই ইনপুটগুলির মধ্যে একটি মাত্র হবে।
ম্যাডব্রেক্স

ঠিক আছে, ওপির প্রশ্নটি বোঝায় যে কেবল একটি ইনপুট থাকবে।
কেভিনজি

আমি মনে করি এই বিকল্পটি আমার পক্ষে কাজ করে না, কারণ অনুসন্ধান অনুসন্ধানের ফলে আমি একাধিক বোতাম তৈরি করি gene আমি
আইডিটির

21

আমি অনুমান করছি, আপনি নিজেই জাভাস্ক্রিপ্ট ব্যবহার করে একটি বোতাম তৈরি করছেন। সুতরাং, আপনার কোডের ত্রুটিটি হ'ল, এটি এই ফর্মটিতে রেন্ডার হবে

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

এই বর্তমান অবস্থায় addভেরিয়েবল বা ফাংশন কলগুলির মতো সনাক্তকারী হিসাবে বিবেচিত হবে। আপনার এই মত মান এড়ানো উচিত

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

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

এটা চেষ্টা কর..

এইচটিএমএল:

<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') এর মধ্যে আর্গুমেন্ট প্রেরণের বিষয়ে নিশ্চিত হন


ধন্যবাদ !! দম্পতি hourss এই PROB খুঁজছেন হয়েছে
cweitat

কেউ সাহায্য করে? আমার ক্ষেত্রে, আমি আইডি, স্ক্রিনশট প্রদর্শন করতে সেট করা বোতামটি ক্লিক করলে: snag.gy/7bzEWN.jpg কোড: pastiebin.com/5d35674e2fc31
মণি

6

এছাড়াও আপনি স্ট্রিংয়ে গুরুতর উচ্চারণের চিহ্ন (`) ব্যবহার করেন

চেষ্টা করুন:

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

আরও তথ্যের জন্য দেখুন MDN এবং স্ট্যাকওভারফ্লো

ক্রোম, এজ, ফায়ারফক্স (গেকো), অপেরা, সাফারি সমর্থন করে তবে ইন্টারনেট এক্সপ্লোরার সমর্থন করে না।


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

1
সুন্দর, পরিষ্কার এবং সহজ। ধন্যবাদ

5

সম্পাদিত: যদি প্রয়োজন হয় আপনার এইচটিএমএল কোডে গ্লোবাল অবজেক্ট (জেএস) উল্লেখ করা হয় তবে আপনি এটি চেষ্টা করতে পারেন can [চলকটির চারপাশে কোনও উদ্ধৃতি ('বা ") ব্যবহার করবেন না]

কোলাহল রেফারেন্স।

javascript:

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

এইচটিএমএল:

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

আমি এই সমাধানটি চেষ্টা করার সময় আমি একটি ত্রুটি পেয়েছি: অংশ "+ ফলাফল.নাম +" এই ক্ষেত্রে স্ট্রিং হিসাবে ব্যবহৃত হয়
জ্যাস্পারট্যাক

"ফলাফল" অবজেক্টটি কী? এটি কী জেএসে ঘোষিত বৈশ্বিক পরিবর্তনশীল? মত ... var ফলাফল = {নাম: 'জাভাস্ক্রিপ্ট'};
সন্দীপ জিবি


জাসপ্যাক, আমি উত্তরটি আপডেট করেছি। এটি এখন আপনার জন্য কাজ করে?
সন্দীপ জিবি

উদাহরণের জন্য আপনাকে ধন্যবাদ, তবে এটি আমার ক্ষেত্রে কার্যকর হয় না: ফলাফল পরিবর্তনশীল গ্লোবাল নয়, তবে একটি পদ্ধতির মধ্যে পরিবর্তনশীল। সুতরাং যখন আমি রেজাল্ট.নামের সাথে ফাংশনটি কল করি তখন ফলাফলটি জানা যায় না
জ্যাসপারট্যাক

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

2

একাধিক প্যারামিটারগুলি পাস করার জন্য আপনি স্ট্রিংটিকে ASCII মানের সাথে যুক্ত করে কাস্ট করতে পারেন যেমন একক উদ্ধৃতিতে আমরা ব্যবহার করতে পারি '

var str= "&#39;"+ str+ "&#39;";

2

আমি কী ব্যবহার করছি তা এখানে একটি জ্যুচুরি সমাধান রয়েছে।

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>

1

আপনি স্ন্যাপশটের নীচে ডুবে কমাতে "" এসপির ভিতরে ফাংশন রেখে পুনরায় রিফ্রান্স বা স্ট্রিংয়ের মান পাস করতে পারেন

এখানে চিত্র বর্ণনা লিখুন


0

একাধিক পরামিতিগুলি পাস করার জন্য আপনি স্ট্রিংটিকে ASCII মানের সাথে যুক্ত করে কাস্ট করতে পারেন যেমন একক উদ্ধৃতিতে আমরা ব্যবহার করতে পারি &#39;

var str= "&#39;"+ str+ "&#39;";

একই পরামিতিটি আপনি onclick()ইভেন্টটিতে যেতে পারেন most বেশিরভাগ ক্ষেত্রে এটি প্রতিটি ব্রাউজারের সাথে কাজ করে।


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

তারপরে প্রতিটি আপডেট পৃষ্ঠাতে ফু ফাংশন শুরু করুন।

যদি আমরা করি:

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

তারপরে লুপে তৈরি সমস্ত বোতামের জন্য, "ফলাফল.নাম" প্যারামিটারের শেষ মান


0

আপনি যদি এসপ ব্যবহার করেন তবে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন:

এইচটিএমএল:

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

javascript:

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

0

আপনি যদি বোতাম বা লিঙ্কটি গতিশীলভাবে যুক্ত করে এবং সমস্যার মুখোমুখি হন তবে এটি হতে পারে সহায়তা। আমি এইভাবে সমাধান করেছি।

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

আমি এইচটিএমএল, জ্যাকুয়ারি এবং জেএসে নতুন। তাই হতে পারে আমার কোডটি অনুকূলিত বা সিনট্যাক্স হবে না, তবে এটি আমার জন্য কাজ করছিল।


0

রেজারে, আপনি গতিশীলভাবে প্যারামিটারগুলি পাস করতে পারেন: @ মডেল U ইউনাইটনাম ভিএমএস [i]।


0

আপনি এটি ব্যবহার করতে পারেন,

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

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

এটা আমার জন্য কাজ


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

দয়া করে আপনার কোডটি ব্যাখ্যা করুন, নিজেই এই উত্তরটি কার্যকর নয়
ফিল হডসন

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

1
ওপি স্থির মান সম্পর্কে জিজ্ঞাসা করছে না। এটি প্রশ্নের উত্তর দেয় না।
রুবিআরিক

-1

আপনি এই কোডটি আপনার বোতাম অনক্লিক পদ্ধতিতে ব্যবহার করতে পারেন:

<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.