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 use
this.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
Get High-Order Block'S Id on Click
Merge Two Json/Javascript Arrays in to One Array
How to Send a Http Delete Request from Browser
Syntaxerror: Cannot Use Import Statement Outside a Module
Changing Svg Image Color With JavaScript
Passing Data from Node Js to HTML Using Ejs
Convert a Flat Json File to Tree Structure in JavaScript
How to Avoid Scientific Notation for Large Numbers in JavaScript
Regexp to Match Every Occurence After N Occurences
How to Push Value Pair into Object Using Method
React How to Fix Failed Prop Type - Invalid Prop of Type String Expected Object
Trigger Click in Typescript - Property 'Click' Does Not Exist on Type 'Element'