Javascript function not working on multiple button click in html
Question
I have no javascript knowledge, found some tips from Stakeflow, with that help I have managed to write the below code. There are 5 images in my page and I am trying to send mails by clikcing on the images, but this code is printing URL of the page on mail body when Image1 is clicked, URL is not coming when other images are clicked. I am also trying to refresh the page, which does not work with this code. When i press Image1 multiple times it's concatenating URL that many times to the mail body. Is there any way to simplify this code and send mail with page URL on mail body on each image click? The code is:
<!DOCTYPE html>
<html>
<head>
<title>XYZ</title>
</head>
<body>
<a id='mailTo' href="mailto:test@mail.com?subject=Image1&body=URL: " method="post"><img src="Images1.png" onclick="subBod()">
<a id='mailTo' href="mailto:test@mail.coms?ubject=Image2&body=URL: " method="post"><img src="Images2.png" onclick="subBod()" >
<a id='mailTo' href="mailto:test@mail.com?subject=Image3&body=URL: " method="post"><img src="Images3.png" onclick="subBod()">
<a id='mailTo' href="mailto:test@mail.com?subject=Image4&body=URL: " method="post"><img src="Images4.png" onclick="subBod()">
<a id='mailTo' href="mailto:test@mail.com?subject=Image5&body=URL: " method="post"><img src="Images5.png" onclick="subBod()">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function subBod() {
//var mbody = prompt("Please enter the ticket refrence number without initial OMY-");
var mbody = document.URL;
var href = $("#mailTo").attr('href')
var nRef = href + mbody
$("#mailTo").attr("href", nRef)
window.location.reload()
};
</script>
</body>
</html>
Thank you.
2 answers
solution1
2 2018-01-04 15:38:21
The id attribute should be unique in the same document, try to replace the duplicate ones by common classes like the snippet below shows.
NOTE : Now that you've a common class you could attach the event directly to it from JS code.
$('.mailTo').on('click', subBod); function subBod() { var mbody = document.URL; var href = $(this).attr('href'); var nRef = href + mbody; $(this).attr("href", nRef) console.log(href); window.location.href = nRef; };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class='mailTo' href="mailto:test@mail.com?subject=Image1&body=URL: " method="post"><img src="Images1.png"></a> <a class='mailTo' href="mailto:test@mail.coms?ubject=Image2&body=URL: " method="post"><img src="Images2.png"></a> <a class='mailTo' href="mailto:test@mail.com?subject=Image3&body=URL: " method="post"><img src="Images3.png"></a> <a class='mailTo' href="mailto:test@mail.com?subject=Image4&body=URL: " method="post"><img src="Images4.png"></a> <a class='mailTo' href="mailto:test@mail.com?subject=Image5&body=URL: " method="post"><img src="Images5.png"></a>
solution2
0 2018-01-04 15:47:38
You do not need javascript when you are using anchors around the images. The URL of the anchor will execute when clicked with default browser behavior.
The ID property must be unique for each element in HTML. The METHOD property is unnecessary for your task.
<a id='mailTo1' href="mailto:test@mail.com?subject=Image1&body=URL: "><img src="Images1.png"></a>
<a id='mailTo2' href="mailto:test@mail.coms?ubject=Image2&body=URL: "><img src="Images2.png"></a>
<a id='mailTo3' href="mailto:test@mail.com?subject=Image3&body=URL: "><img src="Images3.png"></a>
<a id='mailTo4' href="mailto:test@mail.com?subject=Image4&body=URL: "><img src="Images4.png"></a>
<a id='mailTo5' href="mailto:test@mail.com?subject=Image5&body=URL: "><img src="Images5.png"></a>
However, if you WANT to use JavaScript, then there are many different ways to implement. Here is one example:
HTML
<img src="Images1.png" data-href="mailto:test@mail.com?subject=Image1&body=URL:" />
<img src="Images2.png" data-href="mailto:test@mail.com?subject=Image2&body=URL:" />
<img src="Images3.png" data-href="mailto:test@mail.com?subject=Image3&body=URL:" />
<img src="Images4.png" data-href="mailto:test@mail.com?subject=Image4&body=URL:" />
<img src="Images5.png" data-href="mailto:test@mail.com?subject=Image5&body=URL:" />
JavaScript
<script type="text/javascript">
$(document).ready(function(){
$('img').on('click', function(){
var mailto = $(this).attr('data-href');
window.location.href = mailto;
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.