Hyperlink (<a>) not working on Button (<button>) - javascript

So I have a list of files that is generated as buttons, which allows a user to highlight them onClick. I also have the file name generated as a hyperlink, so users can download the files directly.
The button seems to be overwriting the hyperlink, and I'm wondering what I can do to get it to recognize my hyperlink click. The hyperlink still underlines when hovered on, so it seems to be registering my cursor, just not the click.
<button name="error_php_troubleshooting.txt" value="error_php_troubleshooting.txt" id="error_php_troubleshooting.txt" class="filelistitems" onclick="DevTracker.fileList('error_php_troubleshooting.txt'); return false;" style="background-color: rgba(255, 229, 143, 0.51);">
<a class="deletelink" href="#" title="Delete File" onclick="DevTracker.deleteFile('error_php_troubleshooting.txt');return false;">X</a>
<a class="filelinks" href="files/TEST02/error_php_troubleshooting.txt">error_php_troubleshooting.txt</a>
</button>
I'm assuming the onClick event is overriding the hyperlink, but oddly enough, the X delete onClick registers. I tried playing with the z-transform to bring it up to the top layer, but it doesn't seem to be working.
I'm sure this is something really silly, but I can't seem to Googl;e the right combo to yield me the results I want.

HTML does not allow buttons to contains links or vice versa.
Use the appropriate, semantic element (a link to link to a URL, a button to submit a form or hang JavaScript from, a checkbox to make a selection) and then apply CSS as desired.
If you need multiple controls next to each other that do different things when clicked: Put them next to each other, not inside each other.

There are a few options you can pursue:
Attach onclick functionality to the button, to follow the desirable link/URL, like so:
<button onclick="location.href='http://www.example.com'" type="button"> www.example.com</button>
Style a tag for it to look like button

Parent Element OnClick will always get precedence.
As you mentioned your deleteLink gets registered but its OnClick wont function as there exists a Parent button OnClick.
Similar case for your Hyperlink.
Please check below I have tried an example to make your case work, even this DOES NOT WORKS
<button name="b1" value="b1" id="b1" class="filelistitems" onclick="window.location.href='https://w3docs.com';" style="background-color: rgba(255, 229, 143, 0.51);">
<a class="X" href="#" title="X" onclick="window.location.href='https://www.youtube.com/';return false;">X</a>
<a class="Y" onclick='abc(event);' href="https://stackoverflow.com/">Y</a>
</button>
<script>
function abc(event) {
event.preventDefault();
var href = event.currentTarget.getAttribute('href')
window.location=href;
}
</script>
What you can do is separate button and anchor tag functionalities.

I found a work around solution that isn't elegant, but does work for my needs.
I added onclick="webapp.downloadFile(this);return false" to my <a> element.
Then in my JS file:
webapp.downloadFile = function( file ) {
var filePath = file.getAttribute("href");
window.open(filePath, '_blank');
return false;
};
Warning : Obviously any type of popup blockers or javascript blocking web plugins can break the desired functionality.

Related

Map separate button to separate CSS file to change background image of my page

I am trying to change the background of my page using angular f/w by calling the different CSS files on click of different button on the same page.
CSS1.css
body {
background-image: url("./Images/mg.jpg");
}
CSS2.css
body {
background-image: url("./Images/mg.jpg");
}
In the html file i am trying to create 2 buttons such that on click of button1, CSS1.css file will be called and on click of button2, CSS2.css file will be called.
I am trying to access a CSS file by creating an ID to the button and mapping script function function to it but i am getting some runtime error
HTML File
<button type="button" id="button1" onclick="myFunction()">background1</button>
<link rel="stylesheet" type="text/CSS" href="CSS1.css" id="theme">
Script file
function myFunction()
{
document.getElementById("button1")= document.getElementById("theme");
}
Can you please lemme know what am I doing wrong here?
Thanks.
stylesheet links load the stylesheet right away. You don't need custom Javascript to apply it.
To achieve the effect you want you can remove the link tags and modify the function like that:
function myFunction() {
document.body.style.background = "url('./Images/mg.jpg')";
}
The getElementById() method returns the element that has the ID attribute with the specified value.
The left side document.getElementById("button1") returns a value , the right side also returns a value. This is not allowed.
You could do something like this this:
HTML
<link rel="stylesheet" href="CSS1.css" id="theme">
<button type="button" (click)="myFunction('CSS1.css')"> background1 </button>
<button type="button" (click)="myFunction('CSS2.css')"> background2 </button>
Tip: Note that I changed your onclick to (click). I notice that one of your tags on your question is angular. If you are using angular, then you should use this attribute instead of onclick.
TypeScript
myFunction(sheet: string) {
document.getElementById('theme').setAttribute('href', sheet);
}

Send onclick event of element without id

I'm trying to automate through my Swift3 app the click of an HTML element in line2 which lacks an 'id'.
HTML portion from website containing desired element(line2)
<div id="actionButtons" style>
<input class="pptbutton" onclick="return addSimResults();" title="SimulateRace" type="submit" value="Simulate">
Clear All = $0
<div class="holder" style="font-size:0.8em;">
<input class="pttbutton" id="graphButton" onclick="return addGraphResults();" style title="Graph your simulation" type="submit" value="Graph HvH">
...etc
I've successful automated line5's element.onclick event with the Swift code
webView.evaluateJavaScript("document.getElementById('graphButton').click();")
I've attempted to grab the element by Class name with Swift code
webView.evaluateJavaScript("document.getElementsByClassName('pptbutton')[0];") {
(result, error) -> Void in
print(result)
}
which returns nil. I've also tried without the "[0]".
Any suggestions how I can cause line2's Element onclick Event?
webView.evaluateJavaScript("document.getElementsByClassName('pptbutton')[0];")
this line of code evaluates the javascript, defined as the given string. The String is pure Javascript which selects the first element within the dom with the css class pptbutton.
You forgot to call the click method on this element, so no click is triggered by your code.
It should be:
webView.evaluateJavaScript("document.getElementsByClassName('pptbutton')[0].click();")
In this way the click event is triggered on the selected element.

Javascript - Paste specific text to textarea on button click

I new in Javascript. I'm working on my Django project and I want to add some buttons like img button. Here is example:
So when user will click img button in textarea will be added this text :
<img src="[YOUR IMAGE]">
Thanks for help.
If i understand your question correctly you have to call a function in javascript to write to your specified element and on your image you use a onclick.
something like:
onclick="document.location=this.id+'.html'
Sample:
$(function(){
var $display = $('#display');
$display.val(0);
$(document).on('click', 'button.number', function(){
if($display.val() != 0) {
$display.val($display.val() + $(this).val());
} else {
$display.val($(this).val());
}
});
});
JS Fiddle Link: http://jsfiddle.net/qohdjovu/
This was probably already answered here: Using jQuery to click the button and display the value of the button
Script function was made by: #R. Canser Yanbakan
You need more than an image if you're not aware of it already. I suggest using Glyphicons for that purpose, will simplify everything and will be more lightweight.
Say we use the fontawesome glyphs.
Create a bar above text area where you'll hold your controls,
<section>
<i id="control-bold" class="fa fa-bold" aria-hidden="true"></i>
<i id="control-italic" class="fa fa-italic" aria-hidden="true"></i>
</section>
<textarea id="textarea"></textarea>
For simplicity I used ids on the button control elements, and will use JQuery to listen to click events to make it even more simple.
$("#control-bold").click(function(){
// Bold was clicked append {bold} to text area with whatever..
$("#textarea").append("{bold}");
});
$("#control-italic").click(function(){
// Italic was clicked append {bold} to text area with whatever..
$("#textarea").append("{bold}");
});
Note this is a simple & basic example to get you started. Glyphicons and JQuery are only my suggestion for this question.
If you are looking for a way to change your button style, I will suggest you to use CSS instead of <img> HTML tag.
a CSS class/id for unselected button with the default background-image
a CSS class/id which override background-image or selected buttons
And you will add/remove classes using javascript element.classList.add('.selected') or element.classList.remove('.selected')

Chrome Extension: Displaying & Hiding Elements?

I'm currently trying to hide a button that is visible on a page, while displaying another one that is automatically hidden (both are on the page, I'm not adding new ones, just changing visibility).
This is how it looks like right now:
<div class="myAwesomeButtons">
<button id="first_button" class="blue_button inset_button" style="">First</button>
<button id="second_button" class="green_button inset_button" style="display: none;">Second</button>
<button id="third_button" class="other_button">Third</button>
</div>
I'm attempting to remove the first button, and remove the style attribute on the second button. How can I achieve this using JavaScript within a Chrome extension?
I already have my manifest.json file in order, but I'm not sure how to go about the rest.
This is what I've tried, but I'm not sure what I'm doing wrong:
function fixButtons() {
document.getElementsByClassName("myAwesomeButtons")[0].style.visibility='hidden';
document.getElementsByClassName("myAwesomeButtons")[1].style.visibility='visible';
}
fixButtons();
function fixButtons() {
var buttonGroup = document.getElementsByClassName("myAwesomeButtons")[0].getElementsByTagName("button");
buttonGroup[0].style.visibility='hidden';
buttonGroup[1].style.visibility='visible';
}
You are mixing up the display and visibility properties.
I avoid using getElementsByClass when possible since it doesn't work with IE. I know this is a Chrome extension though, so it would work. However, since each button already has an ID, I would just use getElementById.
Try
function fixButtons() {
var button1 = document.getElementById("first_button");
button1.style.display= "none";
var button2 = document.getElementById("second_button");
button2.style.display= "inline";
}

Disable link using javascript

I have following HTML and would like to disable the link using javascript.
<a style="white-space: nowrap;" onclick="return InstallWebApp(true);" id="uc_ii_lnkInstall" href="javascript:__doPostBack('uc_ii$lnkInstall','')">
<img style="border-width: 0pt; margin-right: 3px;" id="uc_ii_lnkInstallImg" alt="Install" title="Install" src="/CortexDotNet/pics/buttons/install_g.gif">
Install
</a>
The JavaScript I am using are :
document.getElementById("uc_ii_lnkInstall").disabled = true;
However , it does not work , I could still click this this link after I have disabled the link using the above javascript.I look at the html , it does not seem to have the disable attribute in the a tag.Can anyone help me to explain this please?
document.getElementById("uc_ii_lnkInstall").onclick = function() { return false; };
The return value of false in the old-style event handler prevents the default action (i.e. loading the javascript: URL).
If you want to gray out the image link, you would also need to swap out the image's src URL with one pointing to a grayed-out version of the icon and change the text's color using .style.color = "gray";.
I don't think the 'disable' attribute will work on links, it work mostly on form elements such as inputs, textarea, button, etc.
But as #idealmachine said normal links <a> can be disabled by returning false 'return false' in javascript/jquery.
For example:
let link_example = document.querySelector("#top-content .view-content a");
link_example.removeAttribute("href");
Here is a short and easy way to disable a link.
<a href="javascript:void(0)" >My link is disabled</a>

Categories