How to add onmouseover styling to an element through javascript? - javascript

Attempting to remove and reapply function to the onmouseover event of an element. Not sure how to go about this, have attempted several ways without any luck.
<!DOCTYPE html>
<html>
<body>
<button id="my_button" onmouseover="myFunction(this)">Try it</button>
<script>
function myFunction(ele) {
alert("hi")
document.getElementById("my_button").onmouseover = "null";
document.getElementById("my_button").onmouseover = "myFunction(this)";
}
</script>
</body>
</html>

The issue is that you're setting the button onmouseover property to a string in myFunction instead of to a function object.
The HTML parser creates an anonynmous handler function from the onmousever attribute value for you, but setting the button property to a string in JavaScript won't create such a function. Try
<!DOCTYPE html>
<html>
<body>
<button id="my_button" onmouseover="myFunction.call(this, event)">Try it</button>
<script>
function myFunction(event) {
alert("hi, this.tagName = " + this.tagName)
document.getElementById("my_button").onmouseover = "null";
document.getElementById("my_button").onmouseover = myFunction; // a function object
}
</script>
</body>
</html>
Notice I've modified myFunction to see the button object as its this value, and its argument to be the mouse event raised for the click, and changed the call in the handler generated by the HTML to call myFunction as if it were the actual event handler. This was to keep the calls to myFunction seeing the button as its this value and event as its argument in both cases.
For more about the handler created by the HTML parser see a previous answer (disclaimer: of mine) to 'this inside event handler from HTML attribute' that goes into greater detail.
Note that for various reasons it is no longer recommended to create event handlers using oneventname attribute values in HTML when you can add them using element.addEventListener in JavaSript as part of initialization.

you can use :
<button id="my_button" onmouseover="alert('hi')">Try it</button>

try
<!DOCTYPE html>
<html>
<body>
<button id="my_button" class="mousemove" >try it</button>
<script>
document.getElementsByClassName("mousemove")[0].onmousemove = function(){
alert("hi")
document.getElementById("my_button").onmousemove = function(){ return null }
}
</script>
</body>
</html>

Related

Having trouble with a beginner dom manipulation exercise while using addEventListener

<html>
<head>
<title>Dom Manipulation intro</title>
<!-- <link rel="stylesheet" href="domManStyle.css"> -->
</head>
<body>
<button id="press">Click me</button>
<p>No one has clicked me</p>
<script type="text/javascript" src="DomManip.js"></script>
</body>
</html>
//JS
var button = document.getElementById("#press");
var paragraph = document.querySelector("p");
button.addEventListener("press", onClick);
function onClick(){
paragraph.textContent="Someone Clicked me.";
}
This is the first Dom Manipulation exercise I am trying and keep getting an error: Cannot read property addEventListener of null. I have also tried to set up the JS .addEventListener like:
button.addEventListener("press" , function(){
paragraph.textContent="Someone Clicked me.";
});
but still get the same error.
First, you have a typo in your getElementById method. You have to call it without # as it is already an id and so the id-identifier is not needed:
var button = document.getElementById("press");
Second, there is no press event, you want to listen to a click:
button.addEventListener("click", onClick);

How to alert all content of page on button click with JavaScript

I need to get all the content of page including all codes on JavaScript alert. Please check the code.
function getContent() {
var content = document.getElementsByTagName('html').value;
alert(content);
}
<html>
<head>
</head>
<body>
Some more code..........
Get Content
</body>
</html>
I am trying to execute the function from inside the page and trying to get the value. It is giving me undefined error
.getElementsByTagName() returns a NodeList collection of elements. You need to access the first index with [0]. In addition to this, it does not have a .value property. You're looking for .innerHTML instead.
Note that you also shouldn't make use of onclick, and instead should make use of unobtrusive JavaScript by adding an event listener.
This can be seen in the following:
function getContent() {
var content = document.getElementsByTagName('html')[0].innerHTML;
alert(content);
}
document.getElementsByTagName('a')[0].addEventListener('click', getContent);
<html>
<head></head>
<body>
Some more code..........
Get Content
</body>
</html>
Note: this will not work as expected in a Fiddle, but will work as expected on a proper website.
This can be achieved via the innerHTML field of a DOM element. Consider making the following changes to your getContent() function:
function getContent() {
var { innerHTML } = document.querySelector('html');
alert(innerHTML);
}
<html>
<head>
</head>
<body>
Some more code..........
<p> and some more content </p>
Get Content
</body>
</html>

Calling variable from javascript in an html doc

I work in schools and use google forms to keep track of a number of things.
One of these forms emails people with information from the sheet that is entered.
I have managed to cobble together a good script that provides this service, however, I want it to look good.
My question is simple (or so I believe it is):
When I put in my HTML for the body of the email, how do I call the variables that I have defined earlier in the script?
Do I need to define them in the HTML or can I call them from the JavaScript?
I am not a serious coder by any means but this one has seemed to escape my ability to google it.
Any help would be appreciated.
calling a value of the variable created in javascript, outside the script.
<html>
<script>
var somevariable = "hi"; //this is the variable you create in JavaScript
window.onload = function() {
document.getElementById("blabla").innerHTML = somevariable; //here you send the value of 'somevariable' to html.
}
</script>
<body>
<input type="text" id="blabla" name="someInput"></input>
</body>
</html>
I am not too sure what your code looks like so this is only an attempt to answer what I understand so far.
In you HTML document you don't call variables, you call functions. for example when you click a button, the text would change to what your variable is by calling the onclick Event inside the button, ChangeText() will be the function for the first example:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello</p> <br />
<button onclick="ChangeText()">Button</button> <!-- onclick event -->
<script>
var p1 = document.getElementById("p1"); //variable created
function ChangeText () {
//when you click the button this function will be called
p1.innerHTML = "Changed text on button click!";
}
</script>
</body>
</html>
You could also call on the load of the document (but this would mean that you would't see what it was before):
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello</p> <br />
<script>
var p1 = document.getElementById("p1"); //variable created
p1.innerHTML = "Changed text on page load!"; //change text on load
</script>
</body>
</html>
hope this helps.

Pass event object to trigger function in firefox

This is the MCVE of the problem I'm having. Let say I have this very simple test page:
<html>
<header>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function testMethod(e){
alert(e.target.id);
}
$(document).ready(function(){
$("#btn_test").on("click", testMethod, event);
});
</script>
</header>
<body>
<input type="button" id="btn_test" value="OK" />
</body>
</html>
You can find the jsfiddle here.
In Chrome or IE, when I push the button, the id will be displayed in a message box. But in Firefox since window.event is not defined, I cannot bind testMethod to the button's onclick event.
I know that if I'm writting it inline, I can pass the event like this:
onclick="testMethod(event)"
But how can I pass event to my function in Firefox without writing it inline?
Usually, when you subscribe to an event using on or addEventListener, the event object is passed as a parameter to a callback. You never have to pass it explicitly when you register your callback. So this will do:
$("#btn_test").on("click", testMethod);
The problem with your code on Firefox is that there is no global event property and you get an error:
ReferenceError: event is not defined
and your event subscription never gets registered.
remove the the 3rd parameter it works on firefox.
$("#btn_test").on("click", testMethod);
If you refer to the jQuery Reference here, you'll notice that the third parameter has to be the handler. So, simply remove the third parameter and pass the handler to achieve this.
Check out the demo fiddle here.
<body>
<input type="button" id="btn_test" value="OK" />
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function testMethod(e){
alert(e.target.id);
}
$(document).ready(function(){
$("#btn_test").on("click", testMethod);
});
</script>

Call JS function for specific id in HTML

I have below function in JS file name as hello.js inside js folder.
JS
function hello(){
alert('hello world !);
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/hello.js"></script>
<script>
$(function() {
$("#hello").hello();
});
</script>
</head>
<body>
<button type="button" id="hello">Click Me!</button>
</body>
</html>
How do I attach the hello() function to the button with the id="hello"? I'm doing something wrong but I can't find what.
Edit : I recommend reading all answers for completeness.
Edit2: The purpose of this question was to clarify the general method of attaching functions to specific elements on html. The button and the click interaction was an example.
You are probably looking to bind click event on button with id hello using hello as handler
$("#hello").click(hello);
There are many ways to handle events with HTML or DOM.
Defining it in HTML
<button type="button" id="hello" onclick="hello();">Click Me!</button>
Using JQuery
$("#hello").click(hello);
Attaching a function to the event handler using Javascript:
var el = document.getElementById("hello");
if (el.addEventListener)
el.addEventListener("click", hello, false);
else if (el.attachEvent)
el.attachEvent('onclick', hello);
function hello(){
alert("inside hello function");
}
Useful links
MDN - onclick event
SO - Ans 1
SO - Ans 2
Use .on() to bind event handler.
$("#hello").on('click', hello);
Pure javascript:
var elm=document.getElementById("hello");
elm.onclick= function{ hello();};
Jquery:
$("#hello").click(hello() );

Categories