Onclick Show text


Hi, I'm doing an interactive piano which reproduces the sounds with an onclick, I would like to know how I can show the notes that the user is clicking on in a text field with javascript.

This is the function with which I play the sounds:

$(document).ready(function()) {

        var sonido = document.getElementById("sonido");
        var sonido2 = document.getElementById("sonido2");
        var sonido3 = document.getElementById("sonido3");
        var sonido4 = document.getElementById("sonido4");
        var sonido5 = document.getElementById("sonido5");
        var sonido6 = document.getElementById("sonido6");
        var sonido7 = document.getElementById("sonido7");
        var sonido8 = document.getElementById("sonido8");
        var sonido9 = document.getElementById("sonido9");
        var sonido10 = document.getElementById("sonido10");
        var sonido11 = document.getElementById("sonido11");
        var sonido12 = document.getElementById("sonido12");
        var sonido13 = document.getElementById("sonido13");
        var sonido14 = document.getElementById("sonido14");
        var sonido15 = document.getElementById("sonido15");
        var sonido16 = document.getElementById("sonido16");
        var sonido17 = document.getElementById("sonido17");
        var sonido18 = document.getElementById("sonido18");
        var sonido19 = document.getElementById("sonido19");
        var sonido20 = document.getElementById("sonido20");
        var sonido21 = document.getElementById("sonido21");
        var sonido22 = document.getElementById("sonido22");
        var sonido23 = document.getElementById("sonido23");
        var sonido24 = document.getElementById("sonido24");
        var sonido25 = document.getElementById("sonido25");
        var sonido26 = document.getElementById("sonido26");

asked by Trackless 23.05.2017 в 10:30

2 answers


If what I understood, I understood correctly, you could use this:

document.getElementById("idCampoTexto").innerHTML = document.getElementById("idCampoTexto").innerText + nota;

With nota being a variable in which you have the value of the note in String.

With this code you will be adding the notes to the text box, now you can play with the format when doing the innerHTML

answered by 23.05.2017 / 11:25

You can specify the content you want in an element of the DOM using the innerHTML attribute, for example, if you have an element with id="nota" and the note stored in a variable nota :

document.getElementById("nota").innerHTML = nota;
answered by 23.05.2017 в 10:35