CODEWITHSUNDEEP
javascriptjqueryhtml
Damkulul
Damkulul

Reputation: 1476

use a passed val in js

I need to pass a value from html and use it to find a var in my Js, so according to the value in theId on my html I could use the var in my js. How can I do that?

HTML

 <input id="Waist" type="checkbox" onchange="getToWork(this.id)" >Waist

<script> tag on HTML

function  getToWork(theId){
  usedCheckBox(theId);
}

myJs.js

  function usedCheckBox(theId){

    var temp1 = theId.name; - will be undefined
    var temp2 = Waist.name; - will work
}

var Waist = {name:"bob",age:"17"}

Upvotes: 0

Views: 66

Answers (4)

Booster2ooo
Booster2ooo

Reputation: 1437

You should avoid using the onclick attribute and rather listen for the event "js side" (addEventListener/attachEvent). In the context of those eventhandlers, this generally represents the element the event listener has been attached to:

document.getElementById("Waist").addEventListener("change",getToWork);

function getToWork(){
    usedCheckBox(this);
}
function usedCheckBox(elem){
    var value = elem.value ;
}

Upvotes: 0

Nitesh
Nitesh

Reputation: 1550

The problem with your code is, you are not using document.getElementById as below:

JS:

document.getElementById("Waist").addEventListener("change",function(evt){
    getToWork(this.id);
})

function getToWork(theId){
  usedCheckBox(theId);
}

function usedCheckBox(theId){
    console.log(theId);
    console.log(Waist);
    var temp1 = document.getElementById("Waist").val; // will return Waist
    var temp2 = Waist.val(); // generate error, don't know what you want
}

var Waist = "change today!"

Fiddle: https://jsfiddle.net/xLvzah8w/1/

I understood your question now and for that you should create one parent object as shown:

function usedCheckBox(theId){
    var temp1 = parent[theId].name; // will return bob
    console.log(temp1);
    var temp2 = parent.Waist.name; // will return bob
        console.log(temp2);
}

var parent = {
  Waist : {name:"bob",age:"17"}
}

The reason why your code doesn't work is because you are trying to access property of a string. 'theId' is a string with value 'Waist' where Waist is an object so error occurs.

Updated fiddle: https://jsfiddle.net/xLvzah8w/2/

Upvotes: 1

m_callens
m_callens

Reputation: 6360

When you do: theId.val(), it makes sense that it's undefined. Calling getToWork(this.id) is sending a string, not an HTML element. Therefore calling .val() on a string is undefined.

If you're trying to get the text value stored in the checkbox element that was pressed, you need to change to ...

function getToWork(arg) {
  console.log(document.getElementById(arg).value);
}
<input id="Waist" type="checkbox" value="INPUT_BOX" onchange="getToWork(this.id)"> Waist

Upvotes: 0

Shakti Phartiyal
Shakti Phartiyal

Reputation: 6254

The correct way to proceed with this is:

In place of var temp1 = theId.val();

Use document.getElementById(theId).value

Upvotes: 0

Related Questions