A conditional where if one option of a radio is checked some function occurs and if the other one is-CodePudding

This is what I've come up with, but it doesn't work. The group of functions inside each conditional works just fine if I let one or the other alone in the .js file

I want that the name of the planet to appear (by clicking them) in the "origen" or "destino" box depending on witch option is selected.

var document.getElementById("enter-origen");
var document.getElementById("enter-destino");
var document.getElementById("origen");
var document.getElementById("destino");

if (document.getElementById("origen").checked) {
  function mercurio() {
    document.getElementById("enter-origen").innerHTML = "Mercurio";
  }

  function venus() {
    document.getElementById("enter-origen").innerHTML = "Venus";
  }

  function tierra() {
    document.getElementById("enter-origen").innerHTML = "Tierra";
  }

  function marte() {
    document.getElementById("enter-origen").innerHTML = "Marte";
  }
} else if (document.getElementById("destino").checked) {
  function mercurio() {
    document.getElementById("enter-destino").innerHTML = "Mercurio";
  }

  function venus() {
    document.getElementById("enter-destino").innerHTML = "Venus";
  }

  function tierra() {
    document.getElementById("enter-destino").innerHTML = "Tierra";
  }

  function marte() {
    document.getElementById("enter-destino").innerHTML = "Marte";
  }

}

<div >

  <div onclick="mercurio()" ></div>
  <div onclick="venus()" ></div>
  <div onclick="tierra()" ></div>
  <div onclick="marte()" ></div>
</div>


<div id="panel">

  <label><input type="radio" id="origen" name="origen-destino" style= "margin:8% 0 0 5%;"><h3 style="margin: -3vh 0 0 3.5vw; cursor: pointer;">Origen</h3></label>

  <div >
    <p id="enter-origen" style="text-align: center; margin-top: 0.2vh;">seleccione el planeta de origen</p>
  </div>

  <label><input type="radio" id="destino" name="origen-destino" style= "position: absolute; margin:38% 0 0 5%;"><h3 style="margin: 36% 0 0 3.5vw; cursor: pointer;">Destino</h3></label>

  <div >
    <p id="enter-destino" style="text-align: center; margin-top: 0.2vh;">seleccione el planeta de destino</p>
  </div>

also I'm not shure if I have to declare all those variables

Thanks in advance

CodePudding user response：

There is no need to create four functions with the names of the planets. Planets are data.

The radio buttons don't have an initial status, so checked is added to the first radio button.

One simple handleClick(planet) function is enough to handle the click.

function handleClick(planet) {
  if (document.getElementById("origen").checked) {
    document.getElementById("enter-origen").innerHTML = planet;
  } else {
    document.getElementById("enter-destino").innerHTML = planet;
  }
}

<div >
  <div onclick="handleClick('mercurio')">Mercurio</div>
  <div onclick="handleClick('venus')">Venus</div>
  <div onclick="handleClick('tierra')">Tierra</div>
  <div onclick="handleClick('marte')">Marte</div>
</div>

<div id="panel">
  <input type="radio" id="origen" checked name="origen-destino">Origen
  <p id="enter-origen">seleccione el planeta de origen</p>
  <input type="radio" id="destino" name="origen-destino">Destino
  <p id="enter-destino">seleccione el planeta de destino</p>
</div>