<div align="right" style="border:1 #FF0 solid; background-color:#999" onMouseOver="javascript: function(){this.style.backgroundColor = '#DDD';}" onMouseOut="javascript: function(){this.style.backgroundColor = '#999';}">
Register
</div>
Upon triggering the mouseover event, an error is encountered:
Uncaught SyntaxError: Unexpected token (
I am looking for a solution. How can I create a function within onMouseOver and onMouseOut?
Avoid using the function declaration, instead use:
onMouseOver = "this.style.backgroundColor = '#DDD';"
Also use:
onMouseOut = "this.style.backgroundColor = '#999';"
Additionally, it is recommended to explore unobstrusive javascript.
What is the reason for including a function in your situation? Simply using...
onMouseOut="javascript:this.style.backgroundColor = '#999'">
It's worth exploring jQuery and incorporating unobtrusive javascript into your workflow.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
Simply include the above script to access the jQuery library from Google.
You can then use an external stylesheet to customize your design.
<div id="container"> Register </div>
Next, create an external stylesheet like app.css:
#container {border:1 #FF0 solid; background-color:#999;text-align:left;}
Additionally, you can incorporate an external script such as app.js
$('#container').mouseout(function() {
$('#container').css('backgroundColor', '#DDD')
});
Remember to link the external css and js files appropriately. The external stylesheet should be linked after the jQuery script.
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="app.css">
You can tweak the script to add more functionality triggered by mouse events:
$('#container').mouseout($('#container').css('backgroundColor', '#DDD'))
$('#container').mouseover($('#container').css('backgroundColor', '#DDD'))
$('#container').mouseenter($('#container').css('backgroundColor', '#DDD'))
$('#container').mouseup($('#container').css('backgroundColor', '#DDD'))
For a comprehensive list of available mouse event functions, check out this resource.
Why not utilize CSS for this purpose?
}
Alternatively, if you require a JavaScript function and the background is just an example, consider using jQuery for a simple solution:
To easily change the background color of multiple elements, create an external JavaScript function that takes in the necessary argument:
<script language="javascript" type="text/javascript">
function ChangeBackgroundColor(element) {
element.style.backgroundColor = '#F0F';
}
</script>
<div onmouseover="ChangeBackgroundColor(this);"></div>
A program run through node.js has been developed to create a binary search tree with various methods like insert, remove, and print. The program is divided into two separate files: Tree.js, which exports the functions Tree() along with its methods and test ...
Everything is in order, I've got all the chapters and video series extracted without any issues: $id_course = 1; $stmt = $con->prepare("SELECT c.chapter, v.preview, v.title_video, ...
Within my Angular project, I have successfully integrated Tailwind UI to handle the opening and closing of the hamburger menu by utilizing the code below: <header> <div class="-mr-2 -my-2 md:hidden"> <button type="button ...
Issue with Form Submission in Ajax-Generated Page I am experiencing an issue with form submission on a page generated within AJAX. The page contains two forms, #form1 and #form2. The jQuery code for submitting the form is as shown below: jQuery("#form1" ...
Currently, the file is being sent via AJAX using the following code: var fd = new FormData(); //additional actions to include files var xhr = new XMLHttpRequest(); xhr.open('POST', '/Upload/' + ID); xhr.send(fd); In ...
I am trying to retrieve data from the backend using useSWR. However, I have encountered two bugs in the function getDataUseSWR. The errors occur at line 'fetch(url).then': 1: "Expected 0 arguments, but got 1."; 2: "Property 'then' does ...
How can I call a function that is in an iframe from the parent document? If the function were in the parent, I could simply use parent.func(); but since it's within the iframe, how can I still call it successfully? JavaScript keeps saying it can' ...
Typically, my approach with the Selenium Select object is as follows: val selectCode = new Select(driver.findElement(By.id("someID"))) selectCode.selectByValue("4") The issue arises when there is no value in the html code. Here is an example of a ...
I am working on a select dropdown and want to add a search box to easily filter through the available options. I know this can be done using the chosen library, but I prefer to implement it using plain JavaScript or jQuery. Does anyone have suggestions on ...
Hello, I am attempting to develop a circular object that will rotate in the direction it is dragged. Within this circle, there are elements positioned along the border so that these elements also spin accordingly. To illustrate, below are the specific elem ...
My React application includes an onChange function on a form that collects username and password. Upon submission, the username and password are sent to the server side using redux dispatch in Node.js. On the server side, I am authenticating the credentia ...
Can someone help me with this issue? I am encountering the following error: Uncaught Error: Invariant Violation: Element type is invalid - expected a string for built-in components or a class/function for composite components, but received an object. Bel ...
I am currently working on developing a webpage that displays live forex rates to users. I am pulling the values from a feed and echoing them into a table. My goal now is to use jQuery to show this table to the user. The issue I am facing is that when I tr ...
Error: Unable to access the 'use' property of an undefined object ...
I am having some trouble making specific fields in a form appear based on the selection made from a dropdown menu. Below is a simplified snippet of my code, which should change the display from 'none' to 'block'. Can you help me figure ...
Is there a way to accurately calculate the height of an element including margins, even when dealing with child elements that have larger margins than their parents? HTMLElement.offsetHeight provides the height excluding margin, while this function from ...
Issue: Encountering an Unknown Provider Error in Angular App for: UnitProvider <- Unit Error Details: Error: [$injector:unpr] Unknown provider: UnitProvider <- Unit Codepen Link: View LIVE CODE Example I recently came across a fascinating vide ...
Link to Jsfiddle I'm attempting to activate my current scroll while I am outside that scroll, specifically in #DivDet Here is the code snippet of what I have tried so far: $("div#DivDet").scroll(function () { // Still trying to figure out what ...
In my AngularJS app, I have a need to call the following code: $('.nano').nanoScroller({ alwaysVisible: true }); This should be executed when the application loads and also when the state changes. In traditional non-angular applications, I wou ...
I am faced with a scenario where I have 4 separate arrays and need to identify if any item appears in more than two of the arrays. If this is the case, I must delete the duplicate items from all arrays except one based on a specific property. let arrayA = ...