Hi every one I would like to modify an a Property from a button ease right jajaja
document.getElementById("button_1").style.visibility = "collapse";
But here I have the id from the object I would like to alter but if i don't know specifically the id because the object's come from a loop I should use "this" the JavaScript Keyword right? like "this.id" to get in to the id of the object it call's example
<input type='button' id='button_1' onclick='alert(this.id)' >Click Me!</button>
That will show the id from that element
When I call a Function
<script>
function Funtion_Alert() {
alert (this.id);
}
</script>
<input type='button' id='button_1' onclick='Funtion_Alert(this)' >Click Me!</button>
I get in y the alert undefined I need get the id from the element which is being calling the function
This is not how you pass this. this is special, it's a context of your current function invocation.
Either pass it as an argument, but then you have to call it something else inside the function, like here:
<script>
function Funtion_Alert(element) { // <<< note the argument!
alert(element.id); // <<< note the different name!
}
</script>
<input type='button' id='button_1' onclick='Funtion_Alert(this)' >Click Me!</button>
...or pass it as actual this, by using Function.prototype.call:
<script>
function Funtion_Alert() {
alert(this.id);
}
</script>
<input type='button' id='button_1' onclick='Funtion_Alert.call(this)' >Click Me!</button>
<!-- note the .call -->
Otherwise, the this inside the function will be window as explained here, so this.id will essentially be window.id which is not what you want.
You're also starting an input tag and then closing with a button.
A more idiomatic way of achieving what you're looking for is to addEventListener to the element:
let button = document.getElementById("button_1");
button.addEventListener("click", (e) => alert(e.target.id));
<button id="button_1">Click Me!</button>
You are starting the tag with input field and ending with </button>.
Use this instead, It will work :-)
<button type='button' id='button_1' onclick='alert(this.id)' >Click Me!</button>
Related
<input type="submit" value="Login" onclick="myFunction">
<!-- Project -->
<script>
function myFunction(){
document.getElementById("input[tpye="submit"]").style.backgroundColor="blue";
}
</script>
getElementById gets the element with that id. You're probably looking for querySelector instead, which will select the element that matches that selector:
function myFunction(){
document.querySelector("input[type='submit']").style.backgroundColor="blue";
}
You have done three mistakes in your code snippet
You have not given () to the function call
You have written incorrect spelling in the querySelector of "type" word
You are calling the getElementById() function but you have not given id to the input box
<input type="submit" value="Login" onclick="myFunction()">
<!-- Project -->
<script>
function myFunction(){
document.querySelector("input[type='submit']").style.backgroundColor="blue";
}
</script>
In the javascript function you are using 'getElementById' which means that it'll look for the DOM elements with the id you have provided, and the problem is you didn't provided any id.
You have to first give an id to the button
<button id="some_id">Click</button>
And then align your function in this way.
function myFunction(){ document.getElementById("some_id").style.backgroundColor="blue"; }
this is my solution to your problem. In your case you have some type of input, you need first to add an event listener to the input, which will execute some function on a specific event. In our case, we will execute the change color function.
This is a quick solution to your problem.
let button = document.getElementById('changecolor');
let input = document.getElementById('basic-input');
function changeBackground(){
// Change the background of the page
document.body.style.background = 'red';
// Change background of the button
button.style.background = 'blue';
}
button.addEventListener('click' , changeBackground);
input.addEventListener('click' , changeBackground);
<button id="changecolor">Change background</button>
<input type="text" placeholder="basic input" id="basic-input">
Here the following code doesn't work
<body>
<div id="demo"></div>
<input type="button" value="Click Here" onclick='()=>{document.getElementById("demo").innerText = "Hello World";}'>
<script type="text/javascript"></script>
</body>
But the when I create the function and call it through the onclick event, it works
<body>
<div id="demo"></div>
<input type="button" value="Click Here" onclick='myFunction()'>
<script type="text/javascript">
function myFunction(){
document.getElementById("demo").innerText = "Hello World";
}
</script>
</body>
What is it that I'm doing wrong here?
Intrinsic event attribute values represent the body of a function.
Your code is equivalent to:
function onclick() {
()=>{document.getElementById("demo").innerText = "Hello World";}
}
You have defined a function which, when called (by being triggered by a click event) defines a function but doesn't call it or assign it anywhere.
As with any function, you can put any statements you like in the function body. They don't need to be function calls.
onclick='document.getElementById("demo").innerText = "Hello World";'
Note that intrinsic event attributes are considered bad practise (they fail to separate concerns, they have some surprising scope implications which can lead to variable name clashes, and they can quickly lead into nested quote character hell). Look to use the addEventListener method instead.
I wonder what I am doing wrong in this case? I got this button which is an HTML element. When I click on it, I want the function push() to get activated. Unfortunally my console says:
ReferenceError: push is not defined
Can some one help me in this case? Thanks so much!
<button type="button" onclick=push()>Click Me!</button>
<script type="text/javascript">
function push (){.....};
</script>
You can change onclick=push() to onclick="push()" to make it work!
Also, there might be something wrong in the body of the push function because of which it is not able to compile - hence, the error.
You could do these instead :
You can do this if you want to use the function push() with only one button,
<button type="button" id="clickme">Click Me!</button>
<script type="text/javascript">
document.getElementById("clickme").addEventListener("click", function() {.....}
</script>
And this if you want to use the function push() with multiple button,
<button type="button" id="clickme">Click Me!</button>
<script type="text/javascript">
document.getElementsByClassName("clickme").addEventListener("click", function() {.....}
</script>
Pros : Less HTML
Cons : More javascript
I need one help. I am passing this key word inside the onclick function. if user need to call the same function without using the onclick event how it will be called using javascript.I am explaining the scenario below.
<input name="optional_0_0_ans" id="optional_0_0_ans" class="form-control firstsec" placeholder="Answer" value="" type="text"> <button type="button" class="btn btn-sm btn-success" style="line-height:12px;" onclick="createNew(this,0,0,1);"><i class="fa fa-plus" aria-hidden="true"></i></button>
<script>
function createNew(evt,index,childindex,hidevalue){
}
</script>
On the above code i am passing the this keyword inside the onclick event.Here suppose user wants to call the createNew function some where else and wants to pass the same this key word then how it will be done.Please help me.
Here suppose user wants to call the createNew function some where else and wants to pass the same this key word then how it will be done.
That's not possible since this only exists inside the event handler. The "same this" doesn't exist outside of the handler.
I guess what you mean is that they want to pass the same or a similar value. So what is the value of this? It's a DOM element. They just need to get a reference to a DOM element and pass that:
var someElement = // get reference to a DOM element
createNew(someElement,0,0,1);
Inside the onclick attribute this refers to the current DOM Element. So if you want to achieve the same behavior, you can simply get and parse the DOM Element yourself:
var button = document.querySelector('#optional_0_0_ans button');
createNew(button, 0, 0, 3);
You can do it using below code:
$(".btn-success").on("click", function(){
someFunction(this, param1, param2,...)
})
Where ".btn-success" is a class assigned to button on which click you want to call a JavaScript function. You can also use id in selector.
Yes you can ,add id to your element will be more easy to handle ...
I added id to your button element to illustrate
<button type="button" class="btn btn-sm btn-success" id="btn" style="line-height:12px;" onclick="createNew(this,0,0,1);"><i class="fa fa-plus" aria-hidden="true"></i></button>
<script>
function createNew(evt,index,childindex,hidevalue){
alert(evt.type); //alert button when click
}
createNew(document.getElementById('btn'),4,5,4); //alert button when run
</script>
Why doesn't this work?
<button onclick = "function(){alert('Hello');}">press me</button>
while this does:
<button onclick = "alert('Hello');">press me</button>
They both work. The first one defines a function, but doesn't call it. The second one actually calls alert.
If you're trying to define and call an anonymous function, try this:
<button onclick = "(function(){alert('Hello');})()">press me</button>
Because you're not calling the function--you're defining it.
I don't know why you would, but you could write this:
<button onclick="(function() { alert('Hello'); })()">press me</button>