<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>
I'm struggling with passing a PHP array to a jQuery function and accessing values from a multidimensional JSON array. When I try to retrieve the value of 'lat' using the code below, I receive an error stating Cannot read property 'lat&a ...
Can you explain the distinction between selector 6 and selector 7 as outlined on the w3 website? Inquiring minds want to know. ...
Can anyone guide me on extracting the folder name only from a URL in PHP? For example, if my URL is I'm interested in retrieving just the part of the URL. Any suggestions on how to achieve this would be much appreciated. Thanks! ...
My JSON file contains objects structured like this: [ { "name" : "something", "brand": "x", "category" : "cars" }, { "name" : "something2 ...
Is there a way to capture the scrolling event for an HTML element that is using Select2? I need to be able to dynamically add options to my dropdown when it scrolls. Just so you know: I am using jQuery, and the dropdown is implemented with Select2. The ...
I recently started using Sequelize and have been relying heavily on the documentation available here. The documentation mentions the importance of using hasOne(), hasMany(), and belongsTo() to automatically add foreign key constraints. In my case, I am wor ...
I am currently working on a website project. Within the website, there is a hyperlink labeled "View Page". The intention is for this link to open the linked page in a modal dialog upon being clicked. Below is the code snippet that I have used to achieve t ...
I am in the process of implementing a login feature in Angular that supports multiple providers. However, I have encountered an issue with submitting the form as the loginProvider value is not being sent to the server. Below is the structure of my form: &l ...
I am facing a challenge with aligning buttons in three different td tags, as the text content within each varies. I want the buttons to line up evenly regardless of the amount of text present. Is there a solution that does not involve setting a fixed parag ...
Is there a way to capture the input entered during the @typing event of the b-autocomplete component in Buefy? During the @typing event, the debounce method is called with specific parameters as shown below- <b-field label="Location"> ...
I am working with an API that requests data from a backend service. Sometimes, the data may not be available at the time of the initial request. In such cases, I need the system to retry up to 5 times until the data is present. I can confirm that the dat ...
I'm in the process of upgrading to a higher version of jQuery (3.2.1) and encountering difficulties with updating the ajax file upload functionality using jsAjaxForm from jQuery v2.1.3. Is there a similar function that performs the same role as jaAjax ...
I've been struggling with handling JSON data from an AJAX call and displaying it using ng-repeat. If you want to take a look at my code in a more organized way, I've shared it on http://jsfiddle.net/7quj9omw/. However, please note that the code ...
Take for instance the following code snippet: (I am familiar with using a star in CSS selectors, but not with '> *') .row > * { float: right; } And then there's this one: .row.uniform > * > :first-child { mar ...
Within my navigation div, there exists another div called login. Through the use of JavaScript, I have implemented a functionality that reveals additional divs such as login_name_field, login_pw_field, register_btn, do_login_btn, and hide_login upon clicki ...
I am faced with a challenge of aligning a set of images on a webpage, each with varying heights, widths, and aspect ratios. My goal is to arrange them in a way that they fit seamlessly across the screen while ensuring their heights are uniform. Adjusting ...
Looking for a solution to download a file from an ajax GET request in angularjs? Currently, I am using an invisible iframe to trigger the "Save as" popup for the downloaded file. However, I need to change the name of the file before the popup appears. If ...
Is there a way to validate CSS syntax by checking for specific characters like "{", "}", ";", and ":"? I have come up with four checks to ensure the code is valid, such as verifying that the number of opening and closing curly braces match, as well as the ...
Despite setting my text to font-family: Times New Roman, I'm seeing a different font in my Chrome browser. Here is the relevant HTML code: <p style="color:#F17141;font-size: 120px; font-family: "Times New Roman" ; font-weight: b ...
Hey there! I am currently working on developing an Ecommerce Application using the MERN Stack with redux. I've encountered a problem while trying to send a price array argument in my fetching function. The error message states: XHR GET http://localhos ...