PHPirate PHPirate - 3 months ago 10
Javascript Question

'If button is clicked' on a button already assigned to a function

I have this code, including buttons, each of which calls a ajax function when clicked, and a popup which is filled with the content from the ajax function.

<script>
function loadindex1() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//select the div to change by id
document.getElementById("tt_popup").innerHTML = xmlhttp.responseText;
}
}
//select the file to show next
xmlhttp.open("GET", "stop_1.php", true);
xmlhttp.send();
}

function loadindex2() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//select the div to change by id
document.getElementById("tt_popup").innerHTML = xmlhttp.responseText;
}
}
//select the file to show next
xmlhttp.open("GET", "stop_2.php", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div data-role="popup" id="tt_popup" >
<p>Have patience...</p>
</div> <!-- /popup -->

<div id="tt_div1"></div>

<a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn ui-corner-all" onclick="loadindex1()" id="button_stop1" data-transition="flip" >
<img src="/Pictures/Location_original.png" alt="Problems?" id="loc_img" />
</a>
<a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn ui-corner-all" onclick="loadindex2()" id="button_stop2" data-transition="flip" >
<img src="/Pictures/Location_original.png" alt="Problems?" id="loc_img" />
</a>


I now want to also know which button is clicked, so I can do something with that. I want use local-storage, and make a panel where a user can view information about the place of the last-clicked button. But I first need to know which button is clicked.
(I omitted some of the code, because the full code is rather long)

I tried to put this in a script tag in the head:

document.getElementById('button_stop1').onclick = function() {
alert("button was clicked");
}


But that didn't do anything. The button did the same as before.

I also tried:

(function () {
// Enables stricter rules for JavaScript
"use strict";
// Reference two buttons, and a textbox
var playButton = document.getElementById("play"),
stateTextBox = document.getElementById("state"),
ignoreButton = document.getElementById("ignore");
// Function that changes the value of our stateTextBox
function changeState(event) {
stateTextBox.value = event.target.id + " was clicked";
}
// Event handlers for when we click on a button
playButton.addEventListener("click", changeState, false);
ignoreButton.addEventListener("click", changeState, false);
}());


But that also did nothing. At least my first try worked when I used a button without all that kind of stuff I put in the button. So I figured it had something to do with that.

I think I can't call two functions in one button,but I ran out of things to try.

Answer

To close this off, thanks to Omar:

HTML:

<div data-role="popup" id="tt_popup">
    <p>Have patience...</p>
</div>
<a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn  ui-corner-all" id="button_stop1" data-transition="flip">button_stop1</a>
 <a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn  ui-corner-all" id="button_stop2" data-transition="flip">button_stop2</a>

Javascript:

$(document).on("pagecreate", function () {
    $("#button_stop1, #button_stop2").on("click", function () {
        $("#tt_popup p").text("Button with ID " + this.id + " was clicked");
    });
});

as seen in this fiddle solved the problem.