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

przekazać parametr ciągu w funkcji onclick

Odpowiedzi: