pass string parameter in an onclick function

pass string parameter in an onclick function

I would like to pass a parameter (i.e. a string) to an Onclick function. For the moment, I do this:

with result.name for example equal to string “Add”.
When I click on this button, I have an error that says that Add is not defined. Since this functioncall works perfect with a numeric parameter, I assume that it has something to do with the symbols “” in the string.
Did anyone had this problem before?

Solutions/Answers:

Solution 1:

It looks like you’re building DOM elements from strings. You just need to add some quotes around result.name:

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

You should really be doing this with proper DOM methods though.

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

​document.body.appendChild(inputElement);​

Just be aware that if this is a loop or something, result will change before the event fires and you’d need to create an additional scope bubble to shadow the changing variable.

Related:  TypeScript character type?

Solution 2:

I suggest not even using HTML onclick handlers, and use something more common such as document.getElementById.

HTML:

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

JavaScript:

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

Solution 3:

Couple of concerns for me with respect to using string escape in onClick and as the number of arguments grow, it will become cumbersome to maintain.

The following approach will have a one hop – On click – take the control to a handler method and handler method, based on the event object, can deduct the click event and corresponding object.

It also provides a cleaner way to add more arguments and have more flexibility.

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

On javascript layer:

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

The advantage here is that we can have as many arguments (in above example, data-arg1, data-arg2….) as needed.

Related:  Difference between two dates in years, months, days in JavaScript

Solution 4:

I am guessing, you are creating a button using JavaScript itself. So, the error in your code is that, it will render in this form

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

At this current state, add will be considered as an identifier like variables or function calls. You should escape the value like this

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

Solution 5:

This is a nice and neat way to send value or object.

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

Solution 6:

Try This..

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>

Note: be sure of sending arguments between ‘ ‘ signs like (‘a1’) in html code