We Keep Coding

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

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.

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')

Adding onClick function with Javascript doesn't go through

So I am trying to add an onClick attribute to a button created with Javascript. Obviously I am using Javascript to add it, however it won't go through because when I inspect the element on the web page it doesn't show an onClick attribute there. This is the code I have to create the button
var buttonExponent = document.createElement('button');
buttonExponent.innerHTML = '^';
buttonExponent.onclick = function(){appendExpr(this.className);}; <---This is my problem
buttonExponent.className = 'button operator ' + expression.id + ' top';
buttonExponent.style.marginTop = '0px';
buttonExponent.style.marginLeft = '-6px';
container.appendChild(buttonExponent);
The rest of the functions work fine and everything, however the onClick attribute simply won't get added on. I have tried doing it multiple ways, but none of them work
EDIT: Figured I should add what the output is on the webpage, the element has this HTML
<button class="button operator expr1 top" style="margin-top: 0px; margin-left: -6px;">^</button>
When it should be looking like this
<button onClick="appendExpr(this.className);" class="button operator expr1 top" style="margin-top: 0px; margin-left: -6px;">^</button>

Modifying the element.onclick DOM property doesn't modify the element's onclick attribute. They are two separate pieces of data, confusingly.
To set the attribute, use element.setAttribute('onclick','code here').

Nvm, the problem was that by setting the onClick through element.onClick I was setting the property without the attribute, and the properties don't show up when inspecting the element on the webpage, so I had to set the attribute for it to show up

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";
}

Changing IMG SRC with Javascript

I'm new at javascript and while there are many more complex solutions, I don't understand them and hope I don't have to at this point.
I have a main picture...
<img src="main-picture.jpg" name="Mainpic" id="image">
...and I want to be able to change this picture when I click on one of two thumbnails.
<img src="replacement1.jpg" name="pic1">
<img src="replacement2.jpg" name="pic2">
My javascript code I thought would be super easy. I'm currently using...
function FirstPic(){
document.Mainpic.src = document.pic1.src
return
}
function SecPic(){
document.Mainpic.src = document.pic2.src
return
}
Now the variable is changing however it's not staying changed. When the thumbnail is clicked on, the replacement picture flashes on the screen and then it returns to the original main-picture.jpg.
How do I make the change permanent until a different thumbnail is clicked?
Thanks!

I think it's flipping back because your page is reloading.
You need to return false from your onclick= if you don't want the href= value to activate after your onclick.
Also, you can set href="#" just in case. # goes nowhere (doesn't ever reload the page)

I think your page is refreshing by your click, change your links as :
<img src="replacement1.jpg" name="pic1">
<img src="replacement2.jpg" name="pic2">

Why not do something like this (haven't checked the syntax completly, so it could be faulty.
function FirstPic()
{
var pic1 = document.getElementById("pic1");
if (pic1 == typeof('undefined')) return;
pic1.src = "newpicname.jpg";
}
Make sure you give the tags an ID attribute called pic1 and pic2 (instead of a name attribute) and give the image itself an 'onclick' attribute...
<img onclick='FirstPic()' id='pic1' src='image1.jpg' />