Send value of a <a> onclick

Question

I’m trying to get the value of one <a> send it to a Javascript function, but I don’t know what’s going wrong.

//HTML
<div id="dicaDiv" class="text-center">
    <p id="pDica1" style="display: inline;">Dica 1: <span id="mostrarDica1"><a value="dica1" href="javascript:gerarDica(this.value);">mostrar dica</a></span>.</p><br>
    <p id="pDica2" style="display: inline;">Dica 2: <span id="MostrarDica2"><a value="dica2" href="javascript:gerarDica(this.value);">mostrar dica</a></span>.</p><br>
</div>

//JS
var dica;
function gerarDica(dica) {
if(dica == "dica1") {
    if(randomClasse == 0)
        dica = "veículo";
    else if(randomClasse == 1)
        dica = "animal";
    else if(randomClasse == 2)
        dica = "cor";
    document.getElementById("mostrarDica1").innerHTML = dica;
    document.getElementById("botaoDica").style.display = "none";
    }
}

The variable randomClasse is working, the problem is when I try to put in this if(dica == "dica1").

Answer 1

Your question is a little confusing but I think that’s what you want

    //HTML
<div id="dicaDiv" class="text-center">
    <p id="pDica1" style="display: inline;">Dica 1: 
        <span id="mostrarDica1">
            <a href="#" onclick="gerarDica('dica1');">mostrar dica</a>
        </span>.
    </p>
    <br>
    <p id="pDica2" style="display: inline;">Dica 2: 
        <span id="MostrarDica2">
            <a href="#" onclick="gerarDica('dica2');">mostrar dica</a>
        </span>.
    </p>
    <br>
</div>

//JS
var dica;
function gerarDica(dica) {
    if(dica == "dica1") {
        if(randomClasse == 0)
            dica = "veículo";
        else if(randomClasse == 1)
            dica = "animal";
        else if(randomClasse == 2)
            dica = "cor";
        document.getElementById("mostrarDica1").innerHTML = dica;
        document.getElementById("botaoDica").style.display = "none";
    }
  }

I suggest using switch when you have more than two linked ifs

function gerarDica(dica) {
    if(dica == "dica1") {
        switch (randomClasse) {
          case 0:
            dica = "veículo";
            break;

          case 1:
            dica = "animal";
            break;

          case 2:
            dica = "cor";
            break;

          default:
            dica ='alguma valor padrao';
            break;
      }
        document.getElementById("mostrarDica1").innerHTML = dica;
        document.getElementById("botaoDica").style.display = "none";
    }
  }

Answer 2

If you want Javascript to be executed by clicking on a link, do not use href, and yes onclick.

Other details:

• the tag a has no attribute value. Then an alternative is to pass the value directly to the function gerarDica
• it is customary to leave the href with # and make the call function on onclick return false, so that the link is not followed.

I gave a simplified in your code so it has only the relevant parts to the solution of this specific problem, but you can adapt to your code easily:

function gerarDica(dica) {
    // vou só imprimir o valor para mostrar que está funcionando
    console.log(dica);

    // ... faz tudo que precisa fazer com a dica
  
    // retorna false para o link não ser "seguido"
    return false;
}

<a href="#" onclick="javascript:return gerarDica('dica1');">mostrar dica1</a>
<br>
<a href="#" onclick="javascript:return gerarDica('dica2');">mostrar dica2</a>