melewati parameter string dalam fungsi onclick

225

Saya ingin meneruskan parameter (yaitu string) ke fungsi Onclick. Untuk saat ini, saya melakukan ini:

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

dengan result.name misalnya sama dengan string "Tambah". Ketika saya mengklik tombol ini, saya memiliki kesalahan yang mengatakan bahwa Add tidak didefinisikan. Karena fungsi ini bisa berfungsi dengan sempurna dengan parameter numerik, saya menganggap itu ada hubungannya dengan simbol "" dalam string. Adakah yang pernah mengalami masalah ini sebelumnya?

javascript html

— JasperTack
sumber

1

Mungkin lebih baik dalam hal ini untuk tidak menggunakan penangan event inline.

— Felix Kling

1

Masalah Anda disebabkan oleh variabel yang tidak lolos dengan benar. Periksa jawaban saya

— Starx

351

Sepertinya Anda sedang membangun elemen DOM dari string. Anda hanya perlu menambahkan beberapa kutipan di sekitar result.name:

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

Anda harus benar-benar melakukan ini dengan metode DOM yang tepat.

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

document.body.appendChild(inputElement);

resultPerlu diketahui bahwa jika ini adalah loop atau sesuatu, akan berubah sebelum acara menyala dan Anda harus membuat gelembung cakupan tambahan untuk membayangi variabel yang berubah.

— David
sumber

7

Pemformatan simbol-simbol ini bekerja, jadi terima kasih banyak

— JasperTack

2

Hai @ david..Aku punya satu keraguan ... Saya ingin memberikan beberapa argumen di onclick itu..bagaimana mungkin? dapatkah Anda menjadikannya berguna untuk saya ..?

— VIVEK-MDU

2

@ david, terima kasih telah memecahkan masalah parameter string saya tetapi sekarang saya harus lulus (string, boolean). apa yang harus dilakukan untuk itu

— Zaveed Abbasi

1

Terima kasih, ini sangat membantu saya :)

— Hitesh

2

@david: dapatkah Anda memberi tahu sedikit mengapa kita perlu menambahkan kutipan sekitar itu

— Hitesh

34

Beberapa kekhawatiran bagi saya sehubungan dengan menggunakan pelarian string di onClick dan ketika jumlah argumen bertambah, itu akan menjadi rumit untuk dipertahankan.

Pendekatan berikut akan memiliki satu hop - Pada klik - ambil kontrol ke metode penangan dan metode penangan, berdasarkan pada objek acara, dapat mengurangi peristiwa klik dan objek yang sesuai.

Ini juga menyediakan cara yang lebih bersih untuk menambahkan lebih banyak argumen dan lebih fleksibel.

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

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

Keuntungannya di sini adalah kita dapat memiliki banyak argumen (dalam contoh di atas, data-arg1, data-arg2 ....) sesuai kebutuhan.

— Sairam Krish
sumber

2

Saya terkejut ini tidak mendapatkan lebih banyak upvotes karena ini adalah metode yang lebih bersih untuk meneruskan argumen ke event handler.

— Tim O'Brien

Ini tidak berfungsi, invoketidak dipanggil ketika Anda mengklik tombol

— tanguy_k

Solusi bagus! Jika Anda harus melewati Array atau Objek, cukup gunakan JSON.stringify(obj)dalam HTML dan JSON.parse(event.target.getAttribute('data-arg'))di layer JavaScript

— leonheess

@SairamKrish Dalam kasus saya, jika saya mengklik tombol yang telah saya atur untuk menampilkan id, tangkapan layar: snag.gy/7bzEWN.jpg kode: pastiebin.com/5d35674e2fc31

— Permata

Ini mungkin berhasil, tetapi ini adalah implementasi yang tidak masuk akal dan atipikal yang akan sulit diikuti oleh pengembang lain yang perlu mempertahankannya.

— Spencer Sullivan

24

Saya sarankan tidak menggunakan HTML onclickhandler, dan menggunakan sesuatu yang lebih umum sepertidocument.getElementById .

HTML:

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

JavaScript:

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

— kevinji
sumber

onclickbukan fungsi, ini properti yang harus Anda tetapkan fungsi:....onclick = function() {...};

— Felix Kling

@ Feliksling Terima kasih untuk itu, kepalaku masih dalam mode jQuery.

— kevinji

4

Anda mengasumsikan hanya akan ada satu dari input ini.

— Madbreaks

Pertanyaan OP menyiratkan bahwa hanya akan ada satu input.

— kevinji

Saya pikir opsi ini tidak berfungsi untuk saya, karena saya menghasilkan beberapa tombol sebagai hasil dari operasi pencarian. Saya bisa menyelesaikan ini dengan menggunakan penghitung untuk menambahkan id tetapi saya ingin membuatnya tetap sederhana dan tetap inline

— JasperTack

21

Saya menduga, Anda membuat tombol menggunakan JavaScript itu sendiri. Jadi, kesalahan dalam kode Anda adalah itu, akan ditampilkan dalam formulir ini

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

Pada kondisi saat ini, addakan dianggap sebagai pengenal seperti variabel atau panggilan fungsi. Anda harus menghindari nilai seperti ini

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

— Starx
sumber

16

Ini adalah cara yang bagus dan rapi untuk mengirim nilai atau objek.

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

8

Coba ini..

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>

Catatan: pastikan mengirimkan argumen antara tanda 'seperti (' a1 ') dalam kode html

— Mawardy
sumber

Terima kasih!! telah mencari masalah ini selama beberapa jam

— cweitat

Adakah yang membantu? Dalam kasus saya, jika saya mengklik tombol yang telah saya atur untuk menampilkan id, tangkapan layar: snag.gy/7bzEWN.jpg kode: pastiebin.com/5d35674e2fc31

— Permata

6

Anda juga menggunakan simbol aksen kubur (`) dalam string

coba:

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

untuk informasi lebih lanjut, kunjungi MDN dan Stackoverflow

Dengan Chrome, Edge, Firefox (Gecko), Opera, dukungan Safari, tetapi tidak mendukung Internet Explorer.

— MJ Vakili
sumber

6

jika tombol Anda dihasilkan secara dinamis:

Anda dapat mengirimkan parameter string ke fungsi javascript seperti kode di bawah ini:

Saya melewati 3 parameter di mana yang ketiga adalah parameter string berharap ini bisa membantu.

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
sumber

1

Bagus, Bersih, dan sederhana. Terima kasih

5

Diedit: Jika persyaratannya adalah untuk referensi objek global (js) dalam kode HTML Anda, Anda dapat mencoba ini. [Jangan gunakan tanda kutip ('atau ") di sekitar variabel]

Referensi biola .

Javascript:

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

HTML:

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

— Sandeep GB
sumber

Saya mendapatkan kesalahan ketika saya mencoba solusi ini: bagian "+ result.name +" digunakan sebagai string dalam kasus ini

— JasperTack

apa objek "hasil"? Apakah variabel global dideklarasikan dalam JS? seperti ... var result = {name: 'javascript'};

— Sandeep GB

hasil berisi catatan dari pustaka jowl: ini adalah struktur json dengan nama atribut, tipe, ...

— JasperTack

Jaspack, aku sudah memperbarui jawabannya. Apakah itu berhasil untuk Anda sekarang?

— Sandeep GB

Terima kasih atas contohnya, tetapi itu tidak berfungsi dalam kasus saya: variabel hasil tidak global, tetapi variabel dalam prosedur. Jadi ketika saya memanggil fungsi dengan result.name, hasilnya tidak diketahui

— JasperTack

4

Beberapa parameter:

   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
sumber

2

Untuk melewati beberapa parameter, Anda dapat melemparkan string dengan menggabungkannya dengan nilai ASCII seperti, untuk tanda kutip tunggal kita dapat menggunakan '

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

— Tuan Talha
sumber

2

Ini adalah solusi Jquery yang saya gunakan.

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
sumber

1

Anda dapat memberikan referensi atau nilai string cukup masukkan fungsi di dalam koma doube "" di bawah snapshot

masukkan deskripsi gambar di sini

— Abdul Khaliq
sumber

0

Untuk melewati beberapa parameter, Anda dapat melemparkan string dengan menggabungkannya dengan nilai ASCII seperti, untuk tanda kutip tunggal yang dapat kita gunakan '

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

parameter yang sama yang dapat Anda lewati ke onclick() Dalam sebagian besar kasus ini berfungsi dengan setiap browser.

— PVIJAY
sumber

0

jika digunakan untuk pembuatan satu set tombol dengan parameter penangan yang berbeda. 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
   }
}

jika kita lakukan:

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

kemudian fungsi foo mulai setelah setiap halaman pembaruan.

jika kita lakukan:

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

lalu untuk semua tombol yang dibuat dalam loop, nilai terakhir dari parameter "result.name"

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

0

jika Anda menggunakan asp, Anda dapat menggunakan 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
sumber

0

Jika Anda menambahkan tombol atau tautan secara dinamis dan menghadapi masalah maka ini dapat membantu. Saya dipecahkan dengan cara ini.

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

Saya baru mengenal HTML, JQuery dan JS. Jadi mungkin kode saya tidak akan dioptimalkan atau sintaksis, tetapi itu berfungsi untuk saya.

— Avinash Verma
sumber

0

Di Razor, Anda dapat mengirimkan parameter secara dinamis: @ Model.UnitNameVMs [i] .UnitNameID

— Ghadir Farzaneh
sumber

0

Anda bisa menggunakan ini,

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

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

ini bekerja untuk saya

— Agung Panduan
sumber

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

Tolong jelaskan kode Anda, jawaban ini dengan sendirinya tidak berguna

— Phil Hudson

-1

Berikut ini bekerja dengan baik untuk saya,

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

1

OP tidak bertanya tentang nilai konstan. Ini tidak menjawab pertanyaan.

— RubioRic

-1

Anda dapat menggunakan kode ini dalam metode klik tombol Anda:

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

— Roh Solusi
sumber