onclick işlevinde pass string parametresi

226

Bir parametre (yani bir dize) bir Onclick işlevine geçmek istiyorum. Şimdilik bunu yapıyorum:

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

sonuç.adı ile örneğin "Ekle" dizesine eşittir. Bu düğmeyi tıkladığımda, Ekle'nin tanımlanmadığını belirten bir hata var. Bu functioncall sayısal bir parametre ile mükemmel çalıştığı için, dizede "" sembolleri ile ilgili bir şey olduğunu varsayalım. Daha önce bu sorunu yaşayan var mı?

javascript html

— JasperTack
kaynak

1

Bu durumda, satır içi olay işleyicilerini kullanmamak daha iyi olabilir.

— Felix Kling

1

Sorununuz, değişkenin düzgün bir şekilde kaçmamasından kaynaklanmaktadır. Cevabımı

— Starx

352

Dizelerden DOM öğeleri oluşturduğunuz görülüyor. Sadece sonuç.name çevresine bazı alıntılar eklemeniz gerekir:

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

Gerçekten de uygun DOM yöntemleri ile bunu yapıyor olmalı.

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

document.body.appendChild(inputElement);

Bu bir döngü veya başka bir şeyse result, etkinlik tetiklenmeden önce değişeceğini ve değişen değişkeni gölgelemek için ek bir kapsam balonu oluşturmanız gerektiğini unutmayın.

— david
kaynak

7

Sembollerin bu formatı işe yarıyor, bu yüzden çok teşekkür ederim

— JasperTack

2

Merhaba @ david..Ben bir şüphem var ... Bu tıklamayla birden fazla tartışmayı geçmek istiyorum ... nasıl mümkün? benim için faydalı olabilir misin ..?

— VIVEK-MDU

2

@ david, teşekkürler benim dize parametre sorunu çözüldü ama şimdi (dize, boolean) geçmek zorunda. bunun için ne yapmalı?

— Zaveed Abbasi

1

Teşekkürler, gerçekten bana yardımcı oldu :)

— Hitesh

2

@ David: Eğer biz neden etrafında alıntı olduğunu eklemem gerekir mi biraz söz edebilir

— Hitesh

34

OnClick'te dize kaçışını kullanmakla ilgili endişelerim var ve argüman sayısı arttıkça sürdürmek hantal hale gelecek.

Aşağıdaki yaklaşımda tek bir atlama olacaktır - Tıklandığında - denetimi bir işleyici yöntemine götürün ve olay nesnesine bağlı olarak işleyici yöntemi, click olayını ve karşılık gelen nesneyi düşürebilir.

Ayrıca daha fazla argüman eklemek ve daha fazla esnekliğe sahip olmak için daha temiz bir yol sağlar.

<button type="button" 
        className="btn btn-default" 
        onClick="invoke" 
        name='gotoNode' 
        data-arg1='1234'>GotoNode</button>

Javascript katmanında:

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

Buradaki avantaj, gerektiği kadar çok argümana sahip olabilmemizdir (yukarıdaki örnekte data-arg1, data-arg2 ....).

— Sairam Krish
kaynak

2

Bir olay işleyicisine argüman aktarmanın daha temiz bir yöntemi olduğu için bunun daha fazla oy almamasına şaşırdım.

— Tim O'Brien

Bu işe yaramaz, invokedüğmeye tıkladığınızda çağrılmaz

— tanguy_k

Harika bir çözüm! Dizileri veya Nesneleri geçmeniz gerekiyorsa, yalnızca JSON.stringify(obj)HTML'de ve JSON.parse(event.target.getAttribute('data-arg'))JavaScript katmanında kullanın

— leonheess

@SairamKrish Benim durumumda, ben kimliğini görüntülemek için ayarladığım düğmeye tıklayın, ekran görüntüsü: snag.gy/7bzEWN.jpg kodu: pastiebin.com/5d35674e2fc31

— Gem

Bu işe yarayabilir, ancak bunu sürdürmesi gereken başka bir geliştirici için takip edilmesi zor olan abartılı, atipik bir uygulamadır.

— Spencer Sullivan

24

HTML onclickişleyicilerini bile kullanmamanızı ve daha yaygın bir şey kullanmanızı öneririm document.getElementById.

HTML:

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

JavaScript:

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

— kevinji
kaynak

onclickbir işlev değildir, bir işlev atamanız gereken bir özelliktir:....onclick = function() {...};

— Felix Kling

@FelixKling Bunun için teşekkürler, kafam hala jQuery modunda.

— kevinji

4

Bu girdilerden sadece biri olacağını varsayıyorsunuz.

— Mart'ta Madbreaks

OP'nin sorusu sadece bir girdi olacağını ima ediyor.

— kevinji

Bence bu seçenek benim için işe yaramıyor çünkü bir arama işlemi sonucunda birden fazla düğme üretiyorum.

— Kimliklere

21

Sanırım JavaScript'in kendisini kullanarak bir düğme oluşturuyorsunuz. Yani, kodunuzdaki hata , bu formda görüntülenecek olmasıdır

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

Bu mevcut durumda, adddeğişkenler veya fonksiyon çağrıları gibi bir tanımlayıcı olarak kabul edilecektir. Bu şekilde değerden kaçmalısın

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

— Starx
kaynak

16

Bu, değer veya nesne göndermenin güzel ve düzgün bir yoludur.

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

— zokaee hamid
kaynak

8

Bunu dene..

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>

Not: HTML kodunda '' işaretleri ('a1') gibi argümanlar gönderdiğinizden emin olun

— Mawardy
kaynak

Teşekkürler!! birkaç saattir bu prob arıyor

— cweitat

Kimse yardım eder mi? Benim durumumda, id göstermek için ayarladığım düğmeye tıklarsam, ekran görüntüsü: snag.gy/7bzEWN.jpg kodu: pastiebin.com/5d35674e2fc31

— Gem

6

ayrıca dizede mezar aksan sembolünü (`) kullanırsınız

Deneyin :

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

daha fazla bilgi için MDN ve Stackoverflow'u ziyaret edin

Chrome, Edge, Firefox (Gecko), Opera, Safari desteği, ancak Internet Explorer'ı desteklemiyor.

— MJ Vakili
kaynak

6

düğmeniz dinamik olarak oluşturulduysa:

Dize parametrelerini aşağıdaki kod gibi javascript işlevlerine iletebilirsiniz:

Ben üçüncü bir dize parametresi olduğu 3 parametre geçti bu umut yardımcı olur.

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
kaynak

1

Güzel, Temiz ve basit. Teşekkürler

5

Düzenlendi: Gereksinim, HTML kodunuzdaki genel nesneye (js) başvurmaksa, bunu deneyebilirsiniz. [Değişkenin çevresinde tırnak işareti ('veya ") kullanmayın]

Keman referansı.

JavaScript:

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

HTML:

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

— Sandeep GB
kaynak

Bu çözümü denediğimde bir hata alıyorum: "+ sonuç.name +" bölümü bu durumda dize olarak kullanılır

— JasperTack

"sonuç" nesnesi nedir? JS'de bildirilen global bir değişken mi? gibi ... var sonuç = {isim: 'javascript'};

— Sandeep GB

sonuç jowl kütüphanesinden bir kayıt içerir: adı, türü, ... öznitelikleri ile bir json yapısı ...

— JasperTack

Jaspack, cevabı güncelledim. Şimdi senin için çalışıyor mu?

— Sandeep GB

Örnek için teşekkür ederim, ancak bu benim durumumda işe yaramıyor: sonuç değişkeni genel değil, bir yordam içindeki bir değişkendir. Sonuç: function.name ile işlevi çağırdığımda sonuç bilinmiyor

— JasperTack

4

Çoklu Parametre:

   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
kaynak

2

Birden fazla parametre iletmek için dizeyi ASCII değeriyle birleştirerek yayınlayabilirsiniz, tek tırnak işaretleri için '

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

— Bay Talha
kaynak

2

İşte kullandığım bir Jquery çözümü.

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
kaynak

1

"" Asp anlık görüntüsünün altına asp

resim açıklamasını buraya girin

— Abdul Halik
kaynak

0

Birden fazla parametre iletmek için dizeyi ASCII değeriyle birleştirerek yayınlayabilirsiniz, tek tırnaklar için '

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

Aynı parametreyi onclick()olaya geçirebilirsiniz.Çoğu durumda her tarayıcıda çalışır.

— PVIJAY
kaynak

0

işleyicilerin farklı parametrelerine sahip bir dizi düğme oluşturmak için kullanılırsa. 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
   }
}

Eğer yaparsak:

some_button.onclick = foo( some_param );
function foo( param ){
    alert( param );
}

sonra her güncelleme sayfasından sonra foo start işlevi.

Eğer yaparsak:

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

döngüde oluşturulan tüm düğmeler için, "sonuç.adı" parametresinin son değeri

— Александр Боярчук
kaynak

0

asp kullanıyorsanız javascript kullanabilirsiniz:

HTML:

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

JavaScript:

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

— Abdullah Tahan
kaynak

0

Dinamik olarak düğme veya bağlantı ekliyorsanız ve sorunla karşı karşıyaysanız, bu yardımcı olabilir. Bu şekilde çözdüm.

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

HTML, JQuery ve JS için yeniyim. Yani benim kod optimize veya sözdizimi olmayabilir, ama benim için çalışıyordu.

— Avinash Verma
kaynak

0

Razor'da parametreleri dinamik olarak iletebilirsiniz: @ Model.UnitNameVMs [i] .UnitNameID

— Ghadir Farzaneh
kaynak

0

Bunu kullanabilirsiniz,

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

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

benim için işi

— Agung Panduan
kaynak

0

'This' anahtar kelimesiyle birlikte bir değişken geçirmeniz gerekiyorsa aşağıdaki kod çalışır

var status = 'Active';
var anchorHTML = '<a href ="#" onClick = "DisplayActiveStatus(this,\'' + status + '\')">' + data+ '</a>';

— Koşu
kaynak

var status = 'Etkin'; var anchorHTML = '<a href ="#" onClick = "DisplayActiveStatus(this,\'' + status +'\')">' + veri + '</a>';

— Arun

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

Lütfen kodunuzu açıklayın, bu cevap tek başına yararlı değil

— Phil Hudson

-1

Aşağıdakiler benim için çok iyi çalışıyor,

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

1

OP sabit bir değer sormuyor. Bu soruya cevap vermiyor.

— RubioRic

-1

Bu kodu, düğme onclick yönteminizde kullanabilirsiniz:

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

— Çözüm Ruhu
kaynak