I have an image of the human dental arcade. I want to display it and when clicking on a certain tooth, the value would fill in an input text field.
Example:
[13,12,11]
The image I'm going to use is this:
The idea is to click on tooth 11, 12 and 13 your values to be filled in the form field to be inserted in the bank.
I believe this is with javascript, but I'm lost in it. Could you help me?
On wikipedia there is an SVG which can be adapted to have numbers. I made this adaptation and with a loop you can put together headphones and an input that does what you want. The JavaScript could look like this:
var paths = [].slice.call(document.querySelectorAll('path.selectable'));
var text = [].slice.call(document.querySelectorAll('text'));
var input = document.querySelector('input');
var selecionados = [];
for (var i = 0; i < paths.length; i++) {
paths[i].addEventListener('click', handler(text[i].innerHTML));
}
function handler(nr) {
return function() {
var selected = this.classList.toggle('selected');
if (selected) selecionados.push(nr);
else selecionados = selecionados.filter(function(_nr){ return _nr != nr; });
input.value = selecionados.join(', ');
}
}
What this does is select / deselect teeth, and join the number of the selected tooth in the input.