Javascript Passing Element Id as Argument

Pass element ID to Javascript function

In jsFiddle by default the code you type into the script block is wrapped in a function executed on window.onload:

<script type='text/javascript'>//<![CDATA[ 
window.onload = function () {
function myFunc(id){
alert(id);
}
}
//]]>
</script>

Because of this, your function myFunc is not in the global scope so is not available to your html buttons. By changing the option to No-wrap in <head> as Sergio suggests your code isn't wrapped:

<script type='text/javascript'>//<![CDATA[ 
function myFunc(id){
alert(id);
}
//]]>
</script>

and so the function is in the global scope and available to your html buttons.

How To pass Element Id In Javascript As Argument or parameter

Use the same function with different arguments for each call. Like you can use:

<input type="button" onclick="call('name')" value="Click Me">

And it will alert the value of input field with id 'name'.

Hope this helps.

How to pass ID as argument in JavaScript function?

Pass the id parameters in to the onclick events as strings. Then give each text input a class of name, not an id (ids have to be unique to a single element). Finally, use the id param to find the container element using getElementById, and use querySelector to drill down to the text input.

function myFunction(param)
{
let el = document.getElementById(param)
let name = el.querySelector('input.name').value
console.log(name)
}
<div id = "id1">
<input type="text" class="name">
<input type="button" onclick="myFunction('id1')" value="Click me">
</div>

<div id = "id2">
<input type="text" class="name">
<input type="button" onclick="myFunction('id2')" value="Click me">
</div>

pass element ID as a parameter to jquery

Give all the select boxes a class, e.g. class="select". Then you can usethis.id` to get the ID of the target element, and concatenate it to the DIV id.

$(".select").change(function() {
var num = this.id.slice(6); // get N from id="SelectN"
$("#hiddentable1" + num).toggle($(this).val() == "2" || $(this).val() == "3"));
});

Javascript Pass Element ID Attribute as Parameter

newNode.onclick = function(){
test(this.id);
};

function test(id){
alert(id);
}

Example: http://jsfiddle.net/sHZeL/1/

Passing element ID to function

Your function call is not valid, but you can pass a string to the function:

op_up('#element_1')

Then you can use document.querySelector to get a reference to the element:

function op_up(selector){
document.querySelector(selector).style.color='#FF0000';
}

Or as I already said in the comments, if you pass the ID as

op_up('element_1')

use document.getElementById:

function op_up(id){
document.getElementById(id).style.color='#FF0000';
}

How to get element id as function parameter

Guys i solved my problem :). But i don't understand well how this working. My solution is:

function disableOtherCheckBoxGrpScrolls(elementsContainerId) {
console.error('containerId: ' + elementsContainerId);
// First is element undefined or Not rendered to DOM my opinion
(function() {
if (typeof elementsContainerId === "undefined") {
throw new Error("elementsContainerId parameter is undefined");
}
var container = document.getElementById(elementsContainerId);
console.error("Elements ID : " + container.length);
container.addEventListener('mousewheel', function(e) {
if (!$(this).hasScrollBar()) return;
// logger.debug('has scroll');

var event = e.originalEvent,
d = event.wheelDelta || -event.detail;

this.scrollTop += (d < 0 ? 1 : -1) * 30;
e.preventDefault();
}, { passive: false });

})();

}

And i thought maybe js worked before html elements not loaded thats i got null and undefined error. By the way thanks for all comments and answers :).

Javascript passing element Id as argument

You can use class names and target the container element, something like this:

const containers = document.querySelectorAll(".slidecontainer");
for(let container of containers) { const slider = container.querySelector(".slider"); const output = container.querySelector(".value"); output.innerHTML = slider.value;
slider.oninput = function() { output.innerHTML = this.value; }}
<body>
<h1>Custom Range Slider</h1><p>Drag the slider to display the current value.</p>
<div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider"> <p>Value: <span class="value"></span></p></div>
<div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider"> <p>Value: <span class="value"></span></p></div>
<div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider"> <p>Value: <span class="value"></span></p></div>


Related Topics



Leave a reply



Submit