Looking for assistance with styling a link. I've connected an external stylesheet to my HTML file, so that part is all set. The goal is to modify the text-decoration when the onclick event occurs. Here's what I currently have:
<a class="dopelink" onclick="document.getElementsByTagName("link").style.textDecoration = "underline"" href="mylink.htm">MY Link</a>
Any insights on where I may be going astray?
<a class="dopelink" style="text-decoration:none" onmousedown="this.style.textDecoration='underline'" href="mylink.htm">My link</a>
Ensure that your javascript uses single quotes instead of double quotes in order to match the HTML.
To maintain consistency, set the text decoration to 'none' as it is normally underlined by default but will change once clicked.
Incorporate 'this' into your inline javascript code rather than using 'document.getElementsByTagName'. This way, it can reference itself more effectively.
Opt for using 'onmousedown' over 'onclick' within your script.
Hopefully my explanation is clear, but if not I apologize :/
To add a :hover effect to an HTML tag, you can do something like this:
<a href="somewhere.html">Take me somewhere</a>
For example, let's say I want the color of this link to be red by default, and then change to blue with underline when hovered over. The CSS code for this would be:
a {
color: #F00;
}
a:hover {
color: #00F;
text-decoration: underline;
}
Your previous code was not functioning correctly because the getElementsByTagName method returns multiple elements as an array object. To make it work, you need to iterate through each one of these elements. You can view a working example in this fiddle. I added a click event to remove text-decoration for clarity.
In the test function (triggered by onclick), you loop through all the a tags obtained using getElementsByTagName and set the text-decoration property accordingly.
function test(){
var links = document.getElementsByTagName("a");
for (var l = 0; l < links.length; l++){
links[l].style.textDecoration ='none';
}}
I am currently working on designing a user profile display. I want to create a card layout that showcases the details listed below. My goal is to have these items displayed side by side instead of being divided as shown in the image. Despite trying to giv ...
I am in need of assistance as I have encountered a major issue that has halted my work progress for several days. My goal is to implement a feature that allows users to navigate between different days both forwards and backwards. While the functionality it ...
While everything else in my code is running smoothly with setInterval, there seems to be an issue with video.getCurrentTime() not displaying in the div id = "test" when the video is playing. I've been trying to figure out why this is happening. Here&a ...
Is there a way to print the contents of a DIV on a webpage? Currently, I am using JavaScript to retrieve the contents of the div and then passing it to a new window object where I call the .print() function. The text contents and images are displayed corre ...
Currently, I am working on a graph visualization project that involves complex calculations being done on an HTML5 canvas. My goal is to create an interactive animation where the graph remains fixed, but additional elements are overlaid as the mouse moves ...
I possess a strong proficiency in html and css, however I lack experience in utilizing javascript. My aim is to showcase the date received from an API onto an html page Despite several attempts, I have not been able to achieve success yet. var getJSON ...
I am seeking a way to automatically retrieve documents from web pages using a Python script. The links in the HTML pages appear as follows: href="https://foo.bar/view.php?id=123456" When clicked on in a web browser, these links open the document with its ...
Here is an example of the HTML code I am working with: <td value='3' style='text-align: center'> <select class='selection' onchange=''> <option value='1'>1</option> <opti ...
I have created custom styles for an object as shown below: form#sign_in{ position:relative; margin:85px auto 50px auto; width:455px; background:#fff; border:#dfdfdf 1px solid; border-radius:5px; -moz-border-radius:5px; -web ...
I have a dilemma with displaying my logo images. I have more than 10 logos, but I want to showcase only 6 of them on page load. The rest of the logos should slide horizontally from right to left in an infinite loop. Can anyone assist me with creating keyf ...
Similar Question: How to hide the scrollbar while still allowing scrolling with mouse and keyboard I have created a sidebar for a web application that needs to enable users to scroll through it without displaying a scrollbar. The content is 500px high ...
Exploring how to utilize the value "typed_from_user" in another tag within the same form, using only PHP & HTML without relying on JavaScript. Is this scenario feasible? For instance, let's say I wish to reuse the term 'pizza' <form> ...
I have implemented Material Design Lite for creating cards on my website. I encountered an issue where the menu I added to the card only displays within the bounds of the card. I would like it to overflow similar to this example () Here is a link to my fi ...
I have replaced the regular upload input + submit button with an icon. My goal is to automatically start the upload process when a file is chosen by the user. However, currently nothing happens after the file selection. <form action="upload.php" method ...
ERROR: GET request to http://domain.com/assets/js/jquery-1.10.2.min.map returned a 500 Internal Server Error Can anyone help me figure out what's causing this error? I checked the log files in /var/log/error but couldn't find any information. T ...
In my asp.net mvc project, I am dealing with numerous checkboxes. The client has provided me with a PSD file in which the checkboxes are either white or black. In the absence of any check mark indicator, I assume the black ones are checked. My goal is to r ...
I'm a newcomer to the world of coding and I have a simple issue that needs fixing. I want to create a form field where users can input the last segment of a URL provided to them. After entering this segment, I want the page to refresh automatically a ...
Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot ...
In my code, I am taking a raw Markdown string stored in 'markdownString' and using the marked.js library to convert it to HTML for display on a web browser. My goal is to extract all plain text values from the page and store them in an array of s ...
My goal is to incorporate pinch zoom and panning using hardware-accelerated CSS properties like transform: translate3d() scale3d(). After completing the gesture, I reset the transform and switch to CSS zoom along with absolute positioning. This method ensu ...