Переключение оператора с помощью onclick не работает - PullRequest
0 голосов
/ 01 апреля 2020

Я хочу: когда пользователи нажимают один из цветов (красный / желтый / зеленый), предложение ниже меняется по-разному. (используя операторы switch и onclick с аргументами)

То, что я пробовал: назначил onclick и id для каждого цвета на html и записал оператор switch на 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(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>

Ответы [ 5 ]

0 голосов
/ 01 апреля 2020

Чтобы улучшить вашу систему, было бы предложено использовать A / Link вместо P для ваших элементов кликов, так как это поможет всем браузерам и пользователям понять, что это «активируемый» элемент и по природе A Элемент / Href предоставляет дополнительные визуальные подсказки, указатель мыши и другие основные моменты и наглядные пособия, чтобы пользователи могли понять, что пользователь может щелкнуть элемент.

Хотя это и не является абсолютно необходимым, я также рекомендую обернуть внутренние элементы кейса {}, но это может быть больше личного предпочтения / стиля.

<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 голосов
/ 01 апреля 2020

у вас было несколько ошибок в коде JS, я исправил их для вас в коде ниже. Вы должны были передать judge() параметр "решение" в оператор switch.

Вы можете использовать this.id для передачи текущего идентификатора в функцию

Я немного отформатировал в html, чтобы сделать вывод более привлекательным для пользователя.

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 голосов
/ 01 апреля 2020
  • Используйте this.id при передаче идентификатора в качестве аргумента.
  • Нет необходимости иметь переменные с именами цветов
  • В этом фрагменте case должно быть равно 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 голосов
/ 01 апреля 2020

document.getElementById ("red") не предоставит красный цвет, это даст вам элемент

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 голосов
/ 01 апреля 2020

Пожалуйста, измените определение метода и список аргументов, как показано ниже.

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;
  }
}
...