Początkujący - problem z instrukcją If

0

Witam, chciałbym wykonać prosty generator treści. Dopiero zaczynam swoją przygodę z JS, więc napisany skrypt który jest strasznie prymitywny - ale działa. Niemniej mam problem z instrukcją If:

<!DOCTYPE html>
<html>
<head>
  <title>Generator</title>
</head>
<body>
 
Zadanie 1: <input id="zad1">
Zadanie 2: <input id="zad2">
Zadanie 3: <input id="zad3">
Zadanie 4: <input id="zad4">
<button id="klikniecie">Wygeneruj</button>
 
<hr>
<div id="wynik"></div>
 
<script>
function generator() {
    var zmiennaA = document.getElementById('zad1').value;
    var zmiennaB = document.getElementById('zad2').value;
    var zmiennaC = document.getElementById('zad2').value;
    var zmiennaD = document.getElementById('zad2').value;
    
    var txtA = "Zadanie 1: ";
    var txtB = "Zadanie 2: ";
    var txtC = "Zadanie 3: ";
    var txtD = "Zadanie 4: ";
 	
    if (zmiennaA === '') {
        document.getElementById("wynik").innerHTML = "Napisz zadanie nr 1!";
      
   if (zmiennaB === '') {
        document.getElementById("wynik").innerHTML = "Napisz zadanie nr 2!";
      }
}

    var html = txtA + zmiennaA + "</br>"+ txtB + zmiennaB + "</br>"+ txtC + zmiennaC+ "</br>"+ txtD + zmiennaD;
 
    document.getElementById('wynik').innerHTML = html;
}
 
document.getElementById('klikniecie').addEventListener('click', generator);
</script>
 
</body>
</html>

Jak się można domyślić, chodzi o to że kiedy dowolny input (zad1, zad2 itd) będzie pusty, ma się wyświetlić wskazana treść. Do każdego Id miałby by być inny tekst.

Proszę o pomoc przy wykonaniu instrukcji if oraz oczywiście o rady jak mógłbym uprościć skrypt i zrobić go lepiej. Zdaje sobie sprawę z jego ułomności.

0

if nie jest pętlą!

1

Trzy różne wersje funkcji generator:

Wersja 1

function generator() {
    var zmiennaA = document.getElementById('zad1').value;
    var zmiennaB = document.getElementById('zad2').value;
    var zmiennaC = document.getElementById('zad3').value;
    var zmiennaD = document.getElementById('zad4').value;

    var txtA = 'Zadanie 1: ';
    var txtB = 'Zadanie 2: ';
    var txtC = 'Zadanie 3: ';
    var txtD = 'Zadanie 4: ';
    
    var wynik = ''
    
    if (zmiennaA != '') {
        wynik += txtA + zmiennaA + "</br>";
    }
    else {
        wynik += 'Napisz zadanie nr 1!<br/>'
    }
    
    if (zmiennaB != '') {
        wynik += txtB + zmiennaB + "</br>";
    }
    else {
        wynik += 'Napisz zadanie nr 2!<br/>'
    }
        
    if (zmiennaC != '') {
        wynik += txtC + zmiennaC + "</br>";
    }
    else {
        wynik += 'Napisz zadanie nr 3!<br/>'
    }
    
    if (zmiennaD != '') {
        wynik += txtD + zmiennaD + "</br>";
    }
    else {
        wynik += 'Napisz zadanie nr 4!<br/>'
    }
    
    document.getElementById('wynik').innerHTML = wynik;
}

Wersja 2

function generator() {
    var zmiennaA = document.getElementById('zad1').value;
    var zmiennaB = document.getElementById('zad2').value;
    var zmiennaC = document.getElementById('zad3').value;
    var zmiennaD = document.getElementById('zad4').value;

    var txtA = 'Zadanie 1: ';
    var txtB = 'Zadanie 2: ';
    var txtC = 'Zadanie 3: ';
    var txtD = 'Zadanie 4: ';
    
    var wynik = ''
    
    wynik += zmiennaA ? txtA + zmiennaA + "</br>" : 'Napisz zadanie nr 1!<br/>'
    wynik += zmiennaB ? txtB + zmiennaB + "</br>" : 'Napisz zadanie nr 2!<br/>'
    wynik += zmiennaC ? txtC + zmiennaC + "</br>" : 'Napisz zadanie nr 3!<br/>'
    wynik += zmiennaD ? txtD + zmiennaD + "</br>" : 'Napisz zadanie nr 4!<br/>'    
    
    document.getElementById('wynik').innerHTML = wynik;
}

Wersja 3

function generator() {    
    var zadanieIndex = 1;
    var wynik = ''
    
    while (true) {
        var zadanie = document.getElementById('zad' + zadanieIndex);        
        
        if (!zadanie)
            break;
        
        wynik += zadanie.value ? `Zadanie ${zadanieIndex}: ${zadanie.value}<br/>` : `Napisz zadanie nr ${zadanieIndex}!<br/>`
        zadanieIndex++;
    }
    
    document.getElementById('wynik').innerHTML = wynik;
}
0

Dziękuje bardzo za odpowiedź. Wszystkie kody działają i są ok.

Postanowiłem rozbudować swój skrypt o dodawanie elementów:

<!DOCTYPE html>
<html>
<head>
<style>
ul li{
list-style-type: none;
}
</style>
</head>
<body>

<ul>
<li><span id="numerStrony">2</span>. <input id="adresURL" placeholder="Adres strony..."></li>
<li>a) Podaj zadanie nr 1: <input id="txt1"></li>
<li>b) Podaj zadanie nr 2: <input id="txt2"></li>
<li>c) Podaj zadanie nr 3: <input id="txt3"></li>
</ul>
<button onclick="wygeneruj()">Wykonaj</button>
<ul id="mojaLista"></ul>



<script>
var numerPunktu = 1;
var wyswietl = document.getElementById("numerStrony");

function wygeneruj() {
numerPunktu++;
wyswietl.innerHTML = numerPunktu;

var lista = document.createElement("LI");
var licz = document.createTextNode(numerPunktu);
lista.appendChild(licz);
document.getElementById("mojaLista").appendChild(lista);


//adres URL
var lista = document.createElement("LI");
var adresacja = document.getElementById("adresURL").value;
var dodajURL = document.createTextNode(adresacja);
var brakURL = document.createTextNode("test");

if (wartosc === ''){
lista.appendChild(brakURL);
}else{
adresacja;
}
lista.appendChild(dodajURL);
document.getElementById("mojaLista").appendChild(lista);

//zadanie 1
var lista = document.createElement("LI");
var wartosc = document.getElementById("txt1").value;
var dodaj = document.createTextNode("Zadanie 1: " + wartosc);
var niepowodzenie = document.createTextNode("Nie podałeś zadania nr1!");

if (wartosc === ''){
lista.appendChild(niepowodzenie);
}else{
lista.appendChild(dodaj);
}
lista.appendChild(dodaj);
document.getElementById("mojaLista").appendChild(lista);

//zadanie 2
var lista = document.createElement("LI");
var wartosc2 = document.getElementById("txt2").value;
var dodaj2 = document.createTextNode("Zadanie 2: " + wartosc2);
var niepowodzenie2 = document.createTextNode("Nie podałeś zadania nr2!");

if (wartosc2 === ''){
lista.appendChild(niepowodzenie2);
}else{
lista.appendChild(dodaj2);
}
lista.appendChild(dodaj2);
document.getElementById("mojaLista").appendChild(lista);


//zadanie 1
var lista = document.createElement("LI");
var wartosc3 = document.getElementById("txt3").value;
var dodaj3 = document.createTextNode("Zadanie 3: " + wartosc3);
var niepowodzenie3 = document.createTextNode("Nie podałeś zadania nr3!");

if (wartosc3 === ''){
lista.appendChild(niepowodzenie3);
}else{
lista.appendChild(dodaj3);
}
lista.appendChild(dodaj3);
document.getElementById("mojaLista").appendChild(lista);


}
</script>

</body>
</html>

Kiedy pola są wypełnione, funkcja kompiluje się poprawnie. Niestety kiedy zostawiam puste pola pojawiają się "Nie podałeś zadania nr3!Zadanie 3:" chociaż nie są wywołane. Z czego to wynika?

Dodatkowo mam pytanie, znacie lepszy sposób na łączenie appendChild() z treścią?

0

Ten kod to dramat. Wszystko wrzucone w jedną funkcję, kompletny groch z kapustą...

Co do pytania, to przyczyna jest bardzo prosta. Masz warunek, że jeżeli wartosc3 === '' to ma się pojawić właśnie ten komunikat. Zatem program zachowuje się poprawnie, tylko autor nie ogarnia co napisał. Może właśnie dlatego, że wszystko jest w jednej funkcji, niesformatowane i bez wcięć?!

0
Haskell napisał(a):

Ten kod to dramat. Wszystko wrzucone w jedną funkcję, kompletny groch z kapustą...

Co do pytania, to przyczyna jest bardzo prosta. Masz warunek, że jeżeli wartosc3 === '' to ma się pojawić właśnie ten komunikat. Zatem program zachowuje się poprawnie, tylko autor nie ogarnia co napisał. Może właśnie dlatego, że wszystko jest w jednej funkcji, niesformatowane i bez wcięć?!

Rozwiązałem problem: wywaliłem lista.appendChild(dodajX) występujące po else.

Jest to prosty generator więc ile funkcji miałem tworzyć? Poza tym na wstępie już podkreśliłem, że jestem początkujący ;) A jako autor doskonale wiem co napisałem krok po kroku ;)

Nie pisze kodu bez wcięć, po prostu tutaj wrzuciłem na szybko i nie widziałem sensu w edycji. Na przyszłość postaram się wrzucić kod już sformatowany ;)

0
kalimati napisał(a):

Jest to prosty generator więc ile funkcji miałem tworzyć? Poza tym na wstępie już podkreśliłem, że jestem początkujący ;)

No skoro uznałeś że musisz dopisać komentarze w stylu: //adres URL, //zadanie 1, //zadanie 2, to to jest chyba wystarczająca przesłanka że @Haskell miał rację i dobrze byłoby stworzyć funkcje dla osobnych fragmentów kodu.

0
kalimati napisał(a):

Nie pisze kodu bez wcięć, po prostu tutaj wrzuciłem na szybko i nie widziałem sensu w edycji. Na przyszłość postaram się wrzucić kod już sformatowany ;)

Ściągnij jakieś sensowny edytor który umożliwia formatowanie kodu skrótem klawiszowym: Visual Studio Code albo WebStorm.

1 użytkowników online, w tym zalogowanych: 0, gości: 1