javascripthtmlonclickradio-buttonchecked

If one radio button is checked then a function should run, but if another is checked then another function should run, but it does not work

This code doesn't work. The group of functions inside each conditional works fine if one group or the other group is alone in the .js file

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

I'm not sure if I have to declare all those variables.

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 class="sol">

  <div onclick="mercurio()" class="planeta mercurio"></div>
  <div onclick="venus()" class="planeta venus"></div>
  <div onclick="tierra()" class="planeta tierra"></div>
  <div onclick="marte()" class="planeta 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 class="display">
    <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 class="display">
    <p id="enter-destino" style="text-align: center; margin-top: 0.2vh;">seleccione el planeta de destino</p>
  </div>

Solution

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

    None of the radio buttons in the question are checked, so I added checked to the first radio button, however this is not strictly necessary.

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

    I used an eventListener on the sol div to listen for the click event and I then extracted the textContent from the clicked div and copied that to the textContent of the appropriate <p> element.

    const solDiv = document.querySelector(".sol");

solDiv.addEventListener("click", handleClick);

function handleClick(event) {
  if (document.getElementById("origen").checked) {
    document.getElementById("enter-origen").textContent = event.target.textContent;
  }
  if (document.getElementById("destino").checked) {
    document.getElementById("enter-destino").textContent = event.target.textContent;
  }
}
    <div class="sol">
  <div>Mercurio</div>
  <div>Venus</div>
  <div>Tierra</div>
  <div>Marte</div>
</div>

<div id="panel">
  <input type="radio" id="origen" name="origen-destino" checked>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>