przekazać parametr ciągu w funkcji onclick

225

Chciałbym przekazać parametr (tj. Ciąg) do funkcji Onclick. Na razie robię to:

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

z wynikiem.nazwa na przykład równym ciągowi „Dodaj”. Po kliknięciu tego przycisku pojawia się błąd, który mówi, że Add nie jest zdefiniowany. Ponieważ to wywołanie funkcji działa idealnie z parametrem numerycznym, zakładam, że ma to coś wspólnego z symbolami „” w ciągu. Czy ktoś miał wcześniej ten problem?

javascript html

— JasperTack
źródło

1

W tym przypadku może być lepiej po prostu nie używać wbudowanych procedur obsługi zdarzeń.

— Felix Kling

1

Twój problem wynika z niepoprawnego zmiany znaczenia zmiennej. Sprawdź moją odpowiedź

— Starx,

351

Wygląda na to, że budujesz elementy DOM z ciągów. Musisz tylko dodać cytaty wokół wyników. Nazwa:

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

Powinieneś naprawdę robić to za pomocą odpowiednich metod DOM.

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

document.body.appendChild(inputElement);

Pamiętaj tylko, że jeśli jest to pętla lub coś, resultzmieni się przed uruchomieniem zdarzenia i musisz utworzyć dodatkowy bąbelek zasięgu, aby ukryć zmienną zmienną.

— David
źródło

7

To formatowanie symboli działa, więc bardzo dziękuję

— JasperTack

2

Cześć @ David .. Mam jedną wątpliwość ... Chcę przekazać wiele argumentów w tym kliknięciu. Jak to możliwe? czy możesz mi się przydać ..?

— VIVEK-MDU

2

@ David, dzięki rozwiązał problem z moim parametrem ciągu, ale teraz muszę przekazać (ciąg, wartość logiczna). co z tym zrobić?

— Zaveed Abbasi

1

Dzięki, naprawdę mi pomogło :)

— Hitesh

2

@ David: czy możesz powiedzieć trochę, dlaczego musimy dodać cytat wokół tego

— Hitesh

34

Kilka obaw dotyczących używania ciągu znaków ucieczki w onClick i wraz ze wzrostem liczby argumentów, utrzymanie się będzie kłopotliwe.

Poniższe podejście będzie miało jeden przeskok - Po kliknięciu - przejmij kontrolę do metody modułu obsługi, a metoda modułu obsługi, w oparciu o obiekt zdarzenia, może odjąć zdarzenie kliknięcia i odpowiedni obiekt.

Zapewnia również czystszy sposób dodawania większej liczby argumentów i większej elastyczności.

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

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

Zaletą jest to, że możemy mieć tyle argumentów (w powyższym przykładzie, dane-arg1, dane-arg2 ....), ile potrzeba.

— Sairam Krish
źródło

2

Dziwię się, że to nie zyskuje więcej głosów pozytywnych, ponieważ jest to czystsza metoda przekazywania argumentów do modułu obsługi zdarzeń.

— Tim O'Brien

To nie działa, invokenie jest wywoływane po kliknięciu przycisku

— tanguy_k

Świetne rozwiązanie! Jeśli chcesz przekazać tablice lub obiekty, po prostu użyj JSON.stringify(obj)w JSON.parse(event.target.getAttribute('data-arg'))

— kodzie

@SairamKrish W moim przypadku, jeśli kliknę przycisk, ustawiłem wyświetlanie identyfikatora, zrzut ekranu: snag.gy/7bzEWN.jpg kod: pastiebin.com/5d35674e2fc31

— Gem

Może to działać, ale jest to zawiła, nietypowa implementacja, która byłaby trudna do naśladowania dla innego programisty, który musiałby to utrzymać.

— Spencer Sullivan

24

Sugeruję nawet, aby nie używać programów onclickobsługi HTML i używać czegoś bardziej powszechnego, takiego jak document.getElementById.

HTML:

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

JavaScript:

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

— Kevinji
źródło

onclicknie jest funkcją, jest to właściwość, do której należy przypisać funkcję:....onclick = function() {...};

— Felix Kling

@FelixKling Dzięki za to, moja głowa wciąż jest w trybie jQuery.

— kevinji,

4

Zakładasz, że będzie tylko jedno z tych danych wejściowych.

— Madbreaks

Cóż, pytanie PO oznacza, że będzie tylko jeden wkład.

— kevinji,

Myślę, że ta opcja nie działa dla mnie, ponieważ generuję wiele przycisków w wyniku operacji wyszukiwania. Mógłbym to rozwiązać za pomocą licznika, aby dodać do identyfikatora, ale chcę, aby było to proste i utrzymywać w linii

— JasperTack

21

Zgaduję, że tworzysz przycisk za pomocą samego JavaScript. Zatem błąd w kodzie polega na tym, że zostanie wyświetlony w tej formie

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

W tym obecnym stanie addbędzie uważany za identyfikator, taki jak zmienne lub wywołania funkcji. Powinieneś uciec przed taką wartością

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

— Starx
źródło

16

Jest to miły i schludny sposób przesyłania wartości lub obiektu.

<!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
źródło

8

Spróbuj tego..

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>

Uwaga: pamiętaj o wysyłaniu argumentów między znakami „”, takimi jak („a1”) w kodzie HTML

— Mawardy
źródło

dzięki!! szukałem tego problemu od kilku godzin

— cweitat

Czy ktoś pomaga? W moim przypadku, jeśli kliknę przycisk, ustawiłem wyświetlanie identyfikatora, zrzut ekranu: snag.gy/7bzEWN.jpg kod: pastiebin.com/5d35674e2fc31

— Gem

6

również używasz poważnego symbolu akcentu (`) w ciągu

próbować :

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

Aby uzyskać więcej informacji, odwiedź MDN i Stackoverflow

Obsługuje Chrome, Edge, Firefox (Gecko), Opera, Safari, ale nie obsługuje Internet Explorera.

— MJ Vakili
źródło

6

jeśli przycisk jest generowany dynamicznie:

Możesz przekazać parametry ciągu do funkcji javascript, takich jak poniższy kod:

Przekazałem 3 parametry, przy czym trzeci to parametr łańcuchowy, mam nadzieję, że to pomoże.

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
źródło

1

Ładnie, czysto i prosto. Dzięki

5

Edytowane: Jeśli wymagane jest odwołanie do obiektu globalnego (js) w kodzie HTML, możesz spróbować. [Nie używaj cudzysłowów („lub”) wokół zmiennej]

SkrzypceOdniesienie do .

JavaScript:

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

HTML:

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

— Sandeep GB
źródło

Gdy próbuję tego rozwiązania, pojawia się błąd: część „+ wynik.nazwa +” jest w tym przypadku używana jako ciąg znaków

— JasperTack

czym jest obiekt „wynikowy”? Czy jest to zmienna globalna zadeklarowana w JS? jak ... var result = {name: 'javascript'};

— Sandeep GB

wynik zawiera zapis z biblioteki jowl: struktura json z atrybutami nazwa, typ, ...

— JasperTack

Jaspack, zaktualizowałem odpowiedź. Czy to działa teraz dla ciebie?

— Sandeep GB

Dziękuję za przykład, ale to nie działa w moim przypadku: zmienna wynikowa nie jest globalna, ale jest zmienną w ramach procedury. Kiedy więc wywołuję funkcję z wynikiem.nazwa, wynik nie jest znany

— JasperTack

4

Wiele parametrów:

   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
źródło

2

Aby przekazać wiele parametrów, możesz rzutować ciąg, łącząc go z wartością ASCII, np. W przypadku pojedynczych cudzysłowów możemy użyć „

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

— Pan Talha
źródło

2

Oto rozwiązanie Jquery, którego używam.

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
źródło

1

Możesz przekazać odwołanie lub wartość ciągu, po prostu wstaw funkcję w asp asp "" poniżej migawki

wprowadź opis zdjęcia tutaj

— Abdul Khaliq
źródło

0

Do przekazywania wielu parametrów można rzutować ciąg, łącząc go z wartością ASCII, np. W przypadku pojedynczych cudzysłowów możemy użyć '

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

ten sam parametr, który można przekazać do onclick()zdarzenia. W większości przypadków działa z każdą przeglądarką.

— PVIJAY
źródło

0

czy użyć do wygenerowania zestawu przycisków o różnych parametrach obsługi. 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
   }
}

Jeśli zrobimy:

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

następnie funkcja foo start po każdej stronie aktualizacji.

Jeśli zrobimy:

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

następnie dla wszystkich przycisków utworzonych w pętli ostatnia wartość parametru „wynik.nazwa”

— Александр Боярчук
źródło

0

jeśli używasz asp, możesz użyć 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
źródło

0

Jeśli dodajesz przycisk lub link dynamicznie i napotykasz problem, może to być pomocne. Rozwiązałem w ten sposób.

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

Jestem nowy w HTML, JQuery i JS. Być może mój kod nie będzie zoptymalizowany ani nie będzie składni, ale działał dla mnie.

— Avinash Verma
źródło

0

W Razor możesz dynamicznie przekazywać parametry: @ Model.UnitNameVMs [i] .UnitNameID

— Ghadir Farzaneh
źródło

0

Możesz tego użyć,

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

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

to dla mnie praca

— Agung Panduan
źródło

-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
źródło

Proszę wyjaśnić swój kod, ta odpowiedź sama w sobie nie jest przydatna

— Phil Hudson

-1

Poniższe działa dla mnie bardzo dobrze,

<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
źródło

1

OP nie pyta o stałą wartość. To nie odpowiada na pytanie.

— RubioRic

-1

Możesz użyć tego kodu w metodzie przycisku onclick:

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

— Duch rozwiązania
źródło