Trying to put a button into a link - html

Question

I have a clickable span, which has a button in it. I want the span to go to one href and the button to another. Here is the code I currently have:
<script>
function deleteAlbum(url) {
var txt;
var r = confirm("Do you really want to delete this album?");
if (r == true) {
window.location.href = url;
}
document.getElementById("demo").innerHTML = txt;
}
</script>
<a href='gallery.php?album=16022015NewTest'>
<span class='album'>
<p>New Test</p>
<p>16/02/2015</p>
<button class='delete' onClick=deleteAlbum('gallery.php?delete_album=16022015NewTest')>
Delete Album
</button>
</span>
</a>
Anyone have any ideas?

Answer 1

You want to read up on event bubbling - the quirksmode explanation in that answer is very nice.
Here's one possible fix for your example:
<script>
function gotoAlbum(albumId) {
window.location.href="gallery.php?album="+albumId;
}
function deleteAlbum(e, url) {
var r = confirm("Do you really want to delete this album?");
if (r == true) {
window.location.href = url;
}
e.stopPropagation();
}
</script>
<span class='album' onClick="gotoAlbum('16022015NewTest');" >
<p>New Test</p>
<p>16/02/2015</p>
<button class='delete' onClick="deleteAlbum(event, 'gallery.php?delete_album=16022015NewTest');">Delete Album</button>
</span>
Aside: as the other comments mention, a button inside an anchor is odd - it's not compliant HTML5 - see this question

Answer 2

You don't. Don't put <button> inside <a>.

Answer 3

According to atmd's comment restructure your html: Don't put button inside a. To be html conform use quotes for attribute values:
<div class="album">
<a href="gallery.php?album=16022015NewTest">
<p>New Test</p>
<p>16/02/2015</p>
</a>
<button class="delete" onClick="deleteAlbum('gallery.php?delete_album=16022015NewTest')">Delete Album</button>
</div>
So the a tag does not include the button tag. It is also a good idea not to have block elements inside inline elements. The span tag has already been changed to a div tag. You might also change the p tags to span. Then the html looks like this:
<div class="album">
<a href="gallery.php?album=16022015NewTest">
<span>New Test</span>
<span>16/02/2015</span>
</a>
<button class="delete" onClick="deleteAlbum('gallery.php?delete_album=16022015NewTest')">Delete Album</button>
</div>