Chcę: Kiedy użytkownicy klikną jeden z kolorów (czerwony / żółty / zielony), poniższe zdanie zmienia się inaczej. (za pomocą instrukcji switch i onclick z argumentami)

Co próbowałem: przypisałem onclick i identyfikatory do każdego koloru w html i napisałem instrukcję switch w js. Ale nic nie reaguje na przypadki przełączenia i domyślnie jest przetwarzane.

var elem1 = document.getElementById("action");
var elem2 = document.getElementById("light");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var green = document.getElementById("green");

var decision = judge;  

function judge(red, yellow, green){

  switch(decision){    
    
    case red:
        elem1.innerHTML = "stop";
        elem2.innerHTML = "red";
        break;
    case yellow:
        elem1.innerHTML = "go with causion";
        elem2.innerHTML = "yellow";
        break;
    case green:
        elem1.innerHTML = "go";
        elem2.innerHTML = "green";
        break;
    default:
        console.log("error");
        break;
  }
}
<p>◆Traffic Light◆</p>
  
<p onclick="judge(red)" id="red"><font color="red">RED</font></p>
<p onclick="judge(yellow)" id="yellow"><font color="yellow">YELLOW</font></p>
<p onclick="judge(green)" id="green"><font color="lightgreen">GREEN</font></p>
  
<p>"I'll<span id="action">___</span>because the traffic light is<span id="light">___</span>!"</p>
0
Linn 1 kwiecień 2020, 14:02

5 odpowiedzi

Najlepsza odpowiedź
  • Użyj this.id podczas przekazywania id jako argumentu.
  • Nie ma potrzeby posiadania zmiennych z nazwami kolorów
  • W tym fragmencie case powinno mieć postać string
var elem1 = document.getElementById("action");
var elem2 = document.getElementById("light");

function judge(decision) {
  switch (decision) {
    case "red":
      elem1.innerHTML = "stop";
      elem2.innerHTML = "red";
      break;
    case "yellow":
      elem1.innerHTML = "go with causion";
      elem2.innerHTML = "yellow";
      break;
    case "green":
      elem1.innerHTML = "go";
      elem2.innerHTML = "green";
      break;
    default:
      console.log("error");
      break;
  }
}
<p>◆Traffic Light◆</p>
<p onclick="judge(this.id)" id="red">
  <font color="red">RED</font>
</p>
<p onclick="judge(this.id)" id="yellow">
  <font color="yellow">YELLOW</font>
</p>
<p onclick="judge(this.id)" id="green">
  <font color="lightgreen">GREEN</font>
</p>
<p>"I'll <span id="action">___</span> because the traffic light is <span id="light">___</span>!"</p>
0
Rayon 1 kwiecień 2020, 11:13

Zmień definicję metody i listę argumentów, jak poniżej.

var elem1 = document.getElementById("action");
var elem2 = document.getElementById("light");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var green = document.getElementById("green");



function judge(color){
  var decision = color;
   case red:
        elem1.innerHTML = " stop ";
        elem2.innerHTML = " red ";
        break;
    case yellow:
        elem1.innerHTML = " go with causion ";
        elem2.innerHTML = " yellow ";
        break;
    case green:
        elem1.innerHTML = " go ";
        elem2.innerHTML = " green ";
        break;
    default:
        console.log("error");
        break;
  }
}
0
Gaurav Singh 1 kwiecień 2020, 11:06

Document.getElementById ("red") nie zapewni koloru czerwonego, a da ci element

var elem1 = document.getElementById("action");
var elem2 = document.getElementById("light");

function judge(decision){
  switch(decision) {
    case 'red':
        elem1.innerHTML = "stop";
        elem2.innerHTML = "red";
        break;
    case 'yellow':
        elem1.innerHTML = "go with causion";
        elem2.innerHTML = "yellow";
        break;
    case 'green':
        elem1.innerHTML = "go";
        elem2.innerHTML = "green";
        break;
    default:
        console.log("error");
        break;
  }
}
<p>◆Traffic Light◆</p>
  
<p onclick="judge('red')" id="red"><font color="red">RED</font></p>
<p onclick="judge('yellow')" id="yellow"><font color="yellow">YELLOW</font></p>
<p onclick="judge('green')" id="green"><font color="lightgreen">GREEN</font></p>
  
<p>"I'll <span id="action">___</span> because the traffic light is <span id="light">___</span> !"</p>
0
Jay Vaghasiya 1 kwiecień 2020, 11:16

Miałeś kilka błędów w kodzie JS, naprawiłem je dla Ciebie w poniższym kodzie. Powinieneś przekazać „decyzję” parametru judge() do instrukcji switch.

Możesz użyć this.id, aby przekazać bieżący identyfikator do funkcji

Wykonałem trochę formatowania w html, aby dane wyjściowe były bardziej atrakcyjne dla użytkownika.

Html

<p>◆Traffic Light◆</p>
  
<p onclick="judge(this.id)" id="red"><font color="red">RED</font></p>
<p onclick="judge(this.id)" id="yellow"><font color="yellow">YELLOW</font></p>
<p onclick="judge(this.id)" id="green"><font color="lightgreen">GREEN</font></p>
  
<p>"I'll <span id="action">___</span> because the traffic light is <span id="light">___</span>!"</p>

JS

var elem1 = document.getElementById("action");
var elem2 = document.getElementById("light");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var green = document.getElementById("green");

var decision = judge;  

function judge(decision){

  switch(decision){    
    
    case "red":
        elem1.innerHTML = "stop";
        elem2.innerHTML = "red";
        break;
    case "yellow":
        elem1.innerHTML = "go with causion";
        elem2.innerHTML = "yellow";
        break;
    case "green":
        elem1.innerHTML = "go";
        elem2.innerHTML = "green";
        break;
    default:
        console.log("error");
        break;
  }
}
0
Community 20 czerwiec 2020, 09:12

Aby ulepszyć system, sugerowane byłoby użycie A / Link zamiast P dla elementów klikanych, ponieważ pomoże to wszystkim przeglądarkom i użytkownikom zrozumieć, że jest to element „klikalny” i będzie z natury elementem A / Href zapewniają dodatkowe wskazówki wizualne, wskaźnik myszy i inne podświetlenia oraz pomoce wizualne, aby użytkownicy zrozumieli, że użytkownik może kliknąć element.

Chociaż nie jest to absolutnie konieczne, zalecam również owijanie wewnętrznych elementów obudowy za pomocą {}, ale może to być bardziej osobiste preferencje / styl.

<p>◆Traffic Light◆</p>

    <p><a href="javascript:judge(red);" id="red"><font color="red">RED</font></a></p>
    <p><a href="javascript:judge(yellow);" id="yellow"><font color="yellow">YELLOW</font></a></p>
    <p><a href="javascript:judge(green);" id="green"><font color="lightgreen">GREEN</font></a></p>

    <p>"I'll<span id="action">___</span>because the traffic light is<span id="light">___</span>!"</p>

<script>
       var elem1 = document.getElementById("action");
        var elem2 = document.getElementById("light");
        var red = document.getElementById("red");
        var yellow = document.getElementById("yellow");
        var green = document.getElementById("green");

        function judge(color){
            switch(color)
            {
                case red: 
                {
                    elem1.innerHTML = " stop ";
                    elem2.innerHTML = " red ";
                    break;
                }
                case yellow:
                {
                    elem1.innerHTML = " go with causion ";
                    elem2.innerHTML = " yellow ";
                    break;
                }
                case green:
                {
                    elem1.innerHTML = " go ";
                    elem2.innerHTML = " green ";
                    break;
                }
                default:
                {
                    console.log("error");
                    break;
                }
            }
        }
</script>
0
Lynyrd 1 kwiecień 2020, 11:54