CODEWITHSUNDEEP
javascriptjqueryhtml
ronsic
ronsic

Reputation: 215

How to click on a map area only once?

I'm creating a medical assessment and there is this page where you can select the body parts which are in pain. Once you click on a body part, the name of it will be displayed below. The problem is it will display multiple times when clicked repeatedly. Is there a way to block the click event from repeating?

Here is the sample.

http://jsfiddle.net/qpmxnv2g/6/

var map = document.getElementById("Map");
map.addEventListener("click", function (e) {
    callAction(e.target);
});
map.one("click", function (e) {
    callAction(e.target);
});

var body = [];
document.getElementById("body").innerHTML = body;

function callAction(area) {
    body.push(area.title);
    document.getElementById("body").value = body;
}

document.getElementById("Clear").addEventListener('click', function () {
    body.length = 0;
    document.getElementById("body").value = '';
});

Upvotes: 1

Views: 148

Answers (1)

Umesh Sehta
Umesh Sehta

Reputation: 10659

change your function like this:-

function callAction(area) {
    if (body.indexOf(area.title) !== -1) { return; }
    body.push(area.title);
    document.getElementById("body").value = body;     
 }

Demo

Upvotes: 1

Related Questions