Rozpoznawanie textu

pytanie zadane 2 marca w JavaScript przez Infos Użytkownik (650 p.)

JAK ZROBIC Żeby PO WPISANIU PO WPISANIU DO INPUTU NP HEJ W DIV POJAWIŁ SIE TEXT : WITAM A Jeżeli BY SIE WPISAŁO PA TO POJAWIŁ SIE TEXT DO WIDZENIA WIENKSZĄSZC ROZUMIEM ALE NIE Wiem TO Zrobić

function sprawdz()
{
    var text = document.getElementById("liczba").value;
   
    if (text == hej) document.getElementById("odp").innerHTML="witam";
    else if (text == pa) document.getElementById("odp").innerHTML="do widzenia";

}

I próbowałem też z TEXT.value =="Hej" ale nie dzała

komentarz 2 marca przez Iei Obywatel (1,950 p.)

Pierwsze, co się rzuca w oczy to brak cudzysłowów między stringami w instrukcji warunkowej

komentarz 2 marca przez wizarddos Nałogowiec (25,930 p.)

@Infos, Pokaż nam też HTML'a. Tak bardziej pod kątem nazewnictwa. Czemu input z tekstem nazywa się "liczba"?

komentarz 2 marca przez Infos Użytkownik (650 p.)

A POPROSTU TAK ZE LICZBA PRZYPADEK

<!DOCTYPE html>

<html>
<head>
  
  
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title> reakcja </title>
  <link rel="stylesheet" href="staleon.css" type="text/css" />
  <script src="istant.js" > </script>
  
  
</head>

<body>
  
  <form>
    
    <input type="text" id="liczba" />
    
  <input type="submit" value="wyslij" onclick="sprawdz()"/>
    
    <div id="odp">
      
      
      
    </div>
  
  </form>
</body>
</html>

Nie mów mi że dziwnie rzeczy nazywam to wiem

A i rozumiem średnio js ale trochę umiem ale tego to nie rozumiem jak to zrobić

komentarz 2 marca przez wizarddos Nałogowiec (25,930 p.)

Nie mów mi że dziwnie rzeczy nazywam to wiem

Spoko, tylko że to bardzo utrudnia późniejsze czytanie kodu - szczególnie gdy jest on długi. Nazwa powinna reprezentować to co robi dana zmienna/stała/funkcja/klasa etc.

Btw, Caps lock naprawdę nie jest potrzebny

komentarz 2 marca przez Infos Użytkownik (650 p.)

No rozumiem to

Za to nie rozumiem jak to zrobić

2 odpowiedzi

odpowiedź 2 marca przez wizarddos Nałogowiec (25,930 p.)

Jak wspomniano w komentarzu dodaj cudzysłowy do hej i pa w swoim JS + w HTML'u zamień

  <input type="submit" value="wyslij" onclick="sprawdz()"/>

  <input type="button" value="wyslij" onclick="sprawdz()"/>

I jescze kilka uwag do kodu:

1. Po co używać `onclick` skoro istnieją event listenery

2. Zamiast `var` lepsze tu by było `let`, a nawet można by się pokusić o `const`

Jeszcze jak coś to zobacz sobie document.querySelector() i trochę różnic między nim a document.getElementByID()

Oprócz tego JS lepiej dodawać na końcu <body> niż na początku w <head>

komentarz 2 marca przez Infos Użytkownik (650 p.)

O let wiem ale jeszcze nie umiem :Dznaczy to pewnie proste i dziekuje

komentarz 2 marca przez wizarddos Nałogowiec (25,930 p.)

Używasz tak samo jak var, ale są małe różnice w widoczności

Tak po krótce np.

console.log(a);
var a = 5

Zadziała, ale zwróci undefined

A z kolei

console.log(a)
let a = 5

Zwróci błąd - więc łatwiej znajdziesz czemu ci coś nie działa

komentarz 2 marca przez Infos Użytkownik (650 p.)



function sprawdz()
{
    var text = document.getElementById("liczba");
   
    if (text == "hej") document.getElementById("odp").innerHTML="witam";
    else if (text == "pa") document.getElementById("odp").innerHTML="do widzenia";

}

<!DOCTYPE html>

<html>
<head>
  
  
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title> reakcja </title>
  <link rel="stylesheet" href="staleon.css" type="text/css" />
  <script src="istant.js" > </script>
  
  
</head>

<body>
  
  <form>
    
    <input type="text" id="liczba" />
    
  <input type="button" value="wyslij" onclick="sprawdz()"/>
    
    <div id="odp">
      
      
      
    </div>
  
  </form>
</body>
</html>

Tak? Mi coś nie dzała więc nie rozumiem

1	komentarz 2 marca przez Infos Użytkownik (650 p.) Nie ważne zapomiałem value juz dzała dziękuję bardzo

odpowiedź 3 marca przez VBService Ekspert (254,260 p.)
edycja 3 marca przez VBService

Proponuje rozwiązanie z tablicą, przy większej ilości słów pisanie kolejnych if-ów może sprawić problem (dodałem różne warianty odpowiedzi) .

[ demonstracja on-line ]

<DOCTYPE html>
  <html lang="pl">
    <head>
      <meta charset="UTF-8">
      <title>Reakcja</title>
      <link rel="stylesheet" href="staleon.css">

    </head>
    <body>
      <form>
        <input type="text" id="textbox">
        <button type="submit">Wyślij</button>

        <div id="replybox"></div>
      </form>

      <script src="istant.js"></script>
    </body>
  </html>

const dictionary = [
  { 'text':'hej',  'reply': [ 'Witam', 'Dzień dobry', 'Jak się masz!' ] },
  { 'text':'pa',   'reply': [ 'Do widzenia', 'Do zobaczenia', 'Żegnam!' ] },
  { 'text':'lol',  'reply': [] }
];

const form = document.querySelector('form');
form.addEventListener('submit', check);

function check(e) {
  e.preventDefault();
  const text = form.querySelector('#textbox').value.trim(),
        replybox = form.querySelector('#replybox');
  const found = dictionary.find(entry => entry.text.toLowerCase() === text.toLowerCase());
  if (found) {
    replybox.textContent = getRandomReply(found.reply);
  } else {
    replybox.textContent = 'Brak odpowiedzi dla podanego słowa.';
  } 
}

function getRandomReply(reply) {
  try {
    return reply[Math.floor(Math.random() * reply.length)];
  } catch (error) {
    console.error(error);
    return '';    
  }
}