Próbuję wykonać ten kod tylko wtedy, gdy istnieje zgodność między dwiema wartościami i używam instrukcji if / else, i umieszczam inną funkcję, aby zmienić kolor tła na czerwony w instrukcji „ELSE” ale jest również wykonywany, nawet jeśli warunki nie są spełnione ... Kiedy klikam pierwszy przycisk „przycisk stany zjednoczone” , działa on bardzo dobrze, ale po kliknięciu dowolnego z dwóch pozostałych przycisków wykonuje dwie instrukcje, tj. Napisz „Tak, dopasowane” i zmień kolor tła, mimo że znajduje się w instrukcji ELSE .. jak mogę to zatrzymać ??? Oto mój kod

const words = {
  "united states": "us",
  "united kingdoms": "uk",
  "united nations": "un",
};

function check(val) {

  for (word in words) {
    if (val == word) {
      document.getElementById('debug').innerHTML = "Yes, Matched";
      break;
    } else {
      document.getElementById('debug').innerHTML = "No Match";
      bgRed();

    }
  }
};

function bgRed() {
  for (i = 0; i < 3; i++) {
    document.getElementsByTagName('input')[i].style.background = 'red';
  }
}
* {
  text-align: center
}

input {
  margin: 30px;
}
<input type="button" value="united states" onclick="check(this.value)"><br>
<input type="button" value="united kingdoms" onclick="check(this.value)"><br>
<input type="button" value="united nations" onclick="check(this.value)">
<div id="debug"></div>
0
Sami 2 kwiecień 2020, 00:55

3 odpowiedzi

Najlepsza odpowiedź

Problem polega na tym, że wykonujesz akcję wewnątrz pętli, w której przechodzisz przez wszystkie elementy w obiekcie words.

W przypadku „stanów zjednoczonych” jest to pierwsza pozycja na liście, więc kod przechodzi do bloku „dopasowano tak”, a następnie przestaje się zapętlać z powodu break. Ale w drugim i trzecim przypadku ma szansę przejść do else w pierwszej pętli, ponieważ nie pasuje. I tam ustawiasz tło na czerwono. Ale nigdy nie zmieniasz tła z powrotem w późniejszych pętlach.

Lepszym rozwiązaniem byłoby zaczekanie, aż pętla się zakończy, przed podjęciem jakichkolwiek widocznych działań. Zamiast tego po prostu ustaw flagę wewnątrz pętli, której później użyjesz, aby zdecydować, jaką akcję podjąć.

Próbny:

const words = {
  "united states": "us",
  "united kingdoms": "uk",
  "united nations": "un",
};

function check(val) {
  var match = false;
  for (word in words) {
    if (val == word) {
      match = true;
      break;
    }
  }

  if (match == true) {
    document.getElementById('debug').innerHTML = "Yes, Matched";
  } else {
    document.getElementById('debug').innerHTML = "No Match";
    bgRed();
  }
};

function bgRed() {
  for (i = 0; i < 3; i++) {
    document.getElementsByTagName('input')[i].style.background = 'red';
  }
}
* {
  text-align: center
}

input {
  margin: 30px;
}
<input type="button" value="united states" onclick="check(this.value)"><br>
<input type="button" value="united kingdoms" onclick="check(this.value)"><br>
<input type="button" value="united nations" onclick="check(this.value)">
<div id="debug"></div>
4
ADyson 1 kwiecień 2020, 22:04

W pętli for przeglądasz wszystkie trzy klucze w słowniku. Ponieważ Stany Zjednoczone są pierwszym kluczem, instrukcja if będzie miała wartość true w pierwszej pętli i pętla zostanie przerwana.

Podczas sprawdzania innych wartości instrukcja if w pierwszych iteracjach pętli for da wynik false, a instrukcja else zostanie wykonana. Po pierwszych iteracjach klucz będzie pasował, a instrukcja if będzie miała wartość true, ale dzieje się tak po zmianie tła.

Uważam, że chcesz wykonywać instrukcje else tylko po sprawdzeniu wszystkich kluczy przez pętlę i nie ma dopasowania, wypróbuj następujący kod:

var found = false;
for (word in words) {
    if (val == word) {
        document.getElementById('debug').innerHTML = "Yes, Matched";
        found = true;
        break;
    }
}
if (found == false) {
    document.getElementById('debug').innerHTML = "No Match";
    bgRed();
}
2
Erik McKelvey 1 kwiecień 2020, 22:10

Powodem jest pętla for (word in words), wyobraź sobie, że próbujesz dopasować każdy wybór z listy words.

Przyczyną, dla której tylko Stany Zjednoczone nie zmieniają koloru na czerwony, jest to, że pętle przerywają się, zanim przejdą do instrukcji else.

To, czego chcesz, to prawdopodobnie plik

var found = false;
for (word in words) {
    if (val == word) {
      document.getElementById('debug').innerHTML = "Yes, Matched";
      found = true;
      break;
    }
}
if found == true {
 // do something
} else {
 // do something else
}

6
Thiago Romano 1 kwiecień 2020, 22:01