passar parâmetro de string em uma função onclick

225

Eu gostaria de passar um parâmetro (isto é, uma string) para uma função Onclick. Por enquanto, faço isso:

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

com result.name, por exemplo, igual à sequência "Adicionar". Quando clico nesse botão, ocorre um erro informando que Adicionar não está definido. Como essa função chamada funciona perfeitamente com um parâmetro numérico, suponho que tenha algo a ver com os símbolos "" na string. Alguém já teve esse problema antes?

javascript html JasperTack
fonte
1
Nesse caso, talvez seja melhor simplesmente não usar manipuladores de eventos em linha.
Felix Kling
1
Seu problema é devido ao fato de a variável não estar sendo escapada corretamente. Confira minha resposta
Starx, 10/03/12

Respostas:

351

Parece que você está criando elementos DOM a partir de strings. Você só precisa adicionar algumas aspas em torno de result.name:

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

Você realmente deveria estar fazendo isso com métodos DOM adequados.

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

​document.body.appendChild(inputElement);​

Esteja ciente de que, se for um loop ou algo assim, resultserá alterado antes do evento ser disparado e você precisará criar um balão de escopo adicional para ocultar a variável em mudança.

david
fonte
7
Esta formatação dos símbolos funciona, então muito obrigado
JasperTack
2
Oi @ david..Tenho uma dúvida ... Quero passar vários argumentos nesse onclick..como possível? você pode me tornar útil ..?
VIVEK-MDU
2
@ David, obrigado resolveu meu problema de parâmetro de string, mas agora eu tenho que passar (string, boolean). o que fazer para isso?
Zaveed Abbasi
1
Obrigado, isso realmente me ajudou :)
Hitesh
2
@ David: você pode dizer pouco por que precisamos para adicionar citar em torno de que
Hitesh
34

Algumas preocupações para mim com relação ao uso de escape de string no onClick e à medida que o número de argumentos aumenta, fica difícil manter isso.

A abordagem a seguir terá um salto - Ao clicar - leve o controle para um método manipulador, e o método manipulador, com base no objeto de evento, pode deduzir o evento click e o objeto correspondente.

Ele também fornece uma maneira mais limpa de adicionar mais argumentos e ter mais flexibilidade.

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

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

A vantagem aqui é que podemos ter tantos argumentos (no exemplo acima, data-arg1, data-arg2 ....) quanto necessário.

Sairam Krish
fonte
2
Estou surpreso que isso não esteja ficando mais positivo, pois é o método mais limpo de passar argumentos para um manipulador de eventos.
Tim O'Brien
Isso não funciona, invokenão é chamado quando você clica no botão
tanguy_k
Ótima solução! Se você precisa passar matrizes ou objetos usam apenas JSON.stringify(obj)no HTML e JSON.parse(event.target.getAttribute('data-arg'))no JavaScript-layer
leonheess
@SairamKrish No meu caso, se eu clicar no botão i ter definido a ID de visualização, captura de tela: snag.gy/7bzEWN.jpg código: pastiebin.com/5d35674e2fc31
Gem
Isso pode funcionar, mas é uma implementação atípica e abstrusa que seria difícil de seguir para outro desenvolvedor que precisava manter isso.
Spencer Sullivan
24

Sugiro nem usar onclickmanipuladores de HTML e usar algo mais comum, como document.getElementById.

HTML:

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

JavaScript:

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);
kevinji
fonte
onclicknão é uma função, é uma propriedade à qual você deve atribuir uma função:....onclick = function() {...};
Felix Kling
@ FelixKling Obrigado por isso, minha cabeça ainda está no modo jQuery.
kevinji
4
Você está assumindo que haverá apenas uma dessas entradas.
Madbreaks
Bem, a pergunta do OP implica que haverá apenas uma entrada.
kevinji
Eu acho que essa opção não funciona para mim, porque eu gero vários botões como resultado de uma operação de pesquisa. Eu poderia resolver isso usando um contador para adicionar ao id de mas eu quero mantê-lo simples e mantê-lo em linha
JasperTack
21

Acho que você está criando um botão usando o próprio JavaScript. Portanto, o erro no seu código é que ele será renderizado neste formulário

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

Nesse estado atual, addserá considerado um identificador como variáveis ​​ou chamadas de função. Você deve escapar do valor como este

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

Essa é uma maneira agradável e interessante de enviar valor ou objeto.

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

Tente isso ..

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>

Nota: certifique-se de enviar argumentos entre sinais '' como ('a1') no código html

Mawardy
fonte
obrigado!! procurado este prov para casal hourss
cweitat
Alguém ajuda? No meu caso, se eu clicar no botão i ter definido a ID de visualização, captura de tela: snag.gy/7bzEWN.jpg código: pastiebin.com/5d35674e2fc31
Gem
6

você também usa o símbolo de acento grave (`) na string

experimentar :

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

para mais informações, visite MDN e Stackoverflow

Pelo Chrome, Edge, Firefox (Gecko), Opera, suporte ao Safari, mas não ao Internet Explorer.

MJ Vakili
fonte
6

se seu botão for gerado dinamicamente:

Você pode passar parâmetros de string para funções javascript como abaixo do código:

Passei 3 parâmetros onde o terceiro é um parâmetro de string espero que ajude.

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
fonte
1
Bom, limpo e simples. Obrigado
5

Editado: se o requisito é referenciar o objeto global (js) no seu código HTML, você pode tentar isso. [Não use aspas ('ou ") ao redor da variável]

Referência de violino .

Javascript:

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

HTML:

<input value="Hello" type="button" onClick="gotoNode(result.name)" />​
Sandeep GB
fonte
Eu recebo um erro ao tentar esta solução: a parte "+ result.name +" é usada como string neste caso
JasperTack 10/12/12
o que é objeto "resultado"? É uma variável global declarada em JS? like ... var result = {name: 'javascript'};
Sandeep GB
resultado contém um registro da biblioteca papada: é um JSON-estrutura, com atributos nome, tipo, ...
JasperTack
Jaspack, eu atualizei a resposta. Isso funciona para você agora?
Sandeep GB
Obrigado pelo exemplo, mas isso não funciona no meu caso: a variável result não é global, mas é uma variável dentro de um procedimento. Então, quando eu chamar a função com result.name, resultado não é conhecido
JasperTack
4

Parâmetro múltiplo: 

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

Para passar vários parâmetros, você pode converter a string concatenando-a com o valor ASCII como, para aspas simples, podemos usar '

var str= "&#39;"+ str+ "&#39;";
Mr Talha
fonte
2

Aqui está uma solução Jquery que estou usando.

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

Você pode passar o valor de referência ou string, basta colocar a função dentro das "" vírgulas duplas asp abaixo do instantâneo

insira a descrição da imagem aqui

Abdul Khaliq
fonte
0

Para passar vários parâmetros, você pode converter a string concatenando-a com o valor ASCII como, para aspas simples, podemos usar &#39;

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

o mesmo parâmetro que você pode passar para o onclick()evento. Na maioria dos casos, ele funciona com todos os navegadores.

PVIJAY
fonte
0

se usar para geração de um conjunto de botões com diferentes parâmetros de manipuladores. 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
   }
}

Se nós fizermos:

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

depois a função foo start após cada página de atualização.

Se nós fizermos:

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

depois, para todos os botões criados no loop, o último valor do parâmetro "result.name"

Александр Боярчук
fonte
0

Se você estiver usando asp, poderá usar o 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
fonte
0

Se você estiver adicionando botão ou link dinamicamente e enfrentando o problema, isso pode ser útil. Eu resolvi assim.

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

Eu sou novo em HTML, JQuery e JS. Pode ser que meu código não seja otimizado ou sintaxe, mas estava funcionando para mim.

Avinash Verma
fonte
0

No Razor, você pode passar parâmetros dinamicamente: @ Model.UnitNameVMs [i] .UnitNameID

Ghadir Farzaneh
fonte
0

Você pode usar isso,

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

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

é trabalho pra mim

Agung Panduan
fonte
-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
fonte
Por favor, explique o seu código, esta resposta por si só não é útil
Phil Hudson
-1

O seguinte funciona muito bem para mim,

<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
fonte
1
OP não está perguntando sobre um valor constante. Isso não responde à pergunta.
RubioRic
-1

Você pode usar este código no método onclick do botão:

<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>
Espírito da solução
fonte