Czyszczenie inputa po odznaczeniu checkboxa

Question

Cześć, mam problem z wyczyszczeniem okienka inputa. Dokładniej mówiąc, to mam problem z ustawieniem wartości owego inputa. Cała funkcja polega ogólnie na tym, że jest menu z checkboxami, gdzie użytkownik zaznacza opcje, które go interesują, a później przyciskiem zatwierdza wybór. Po zatwierdzeniu menu znika, a pojawia się sekcja z inputami, gdzie użytkownik ma wpisać wartości do obliczeń (niektóre inputy są stałe, a niektóre są opcjonalne, zależne od wyboru w menu) . Wszystko sprawnie działa, tylko problem pojawia się gdy wpisze się wartość do jednego z opcjonalnych inputów, a później wróci się do menu i odznaczy tę konkretną opcję. Wtedy po powrocie do inputów tego konkretnego/nych nie widać, a jego/ich wartość dalej wliczana jest do obliczeń. Napisałem coś takiego, ale to nie działa. Macie jakieś pomysły? Tylko zależy mi na vanilla javascripcie, bo na razie nie chcę kombinować.

 

function xxx()
{
var temp;
temp = document.getElementById("chekboxOpcji").checked;
if (temp == true) 
	{
	document.getElementById("pierwszyInput").style.display ="table-row";
	document.getElementById("drugiInput").style.display ="table-row";
	}
	else 
	{
	document.getElementById("pierwszyInput").value= '0';
	document.getElementById("drugiInput").value = '0';
	document.getElementById("pierwszyInput").style.display ="none";
	document.getElementById("drugiInput").style.display ="none";
	}

 

Answer 1

Wtedy po powrocie do inputów tego konkretnego/nych nie widać

Pytanie - czy po odnaczeniu checkboxa (ktory renderuje opcjonalne inputy) powinny się wyświetlać te inputy czy nie? Ja rozumiem, że obecnie odznaczam checkboxa i inputów nie ma - i to jest dla Ciebie zachowanie poprawne. Popraw mnie proszę jeśli się mylę. 

 

Wtedy po powrocie do inputów tego konkretnego/nych nie widać, a jego/ich wartość dalej wliczana jest do obliczeń.

Nie lepiej zmienić kod odpowiedzialny za obliczenia - będziesz wtedy przestrzegał zasady Single Responsibility. 

Wstaw proszę kod odpowiedzialny za Twoje obliczenia. 

 

Tak jeszcze od siebie dodam, iż nie warto już stosować zmiennej var. Lepszą alternatywą jest używanie const i let. 

Comments

Nie do końca łapię jeszcze różnice między tymi deklaracjami. Czytałem o tym sporo, ale nic jakoś do mnie nie dotarło :x

Kod podejrzewam, że jest zrobiony conajmniej beznadziejnie, bo pisałem go dawno i nie chciało mi się go przepisywać od nowa, to tylko do niego dorzucałem i taki tego efekt.

Ostrzegam tylko, że to może u Ciebie wywołać nieodwracalne, traumatyczne zmiany w mózgu, także jeśli jesteś pewny, że od tego nie oślepniesz, to możesz sobie spojrzeć :p

javaScript

HTML

 

EDIT: Jakby co, to wiem, że tu żadne zasady nie są zachowane.

Tutaj możesz zobaczyć stronę, o którą chodzi: link

---

Aż mi się przypomniały czasy jak sam pykałem w plemiona ... :)

Kod faktycznie pozostawia trochę do życzenia ale spokojnie widziałem gorsze :)

var piki = parseInt(document.getElementById("pik").value);
var miecze = parseInt(document.getElementById("miecz").value);
var topy = parseInt(document.getElementById("topor").value);
var luki = parseInt(document.getElementById("luk").value);
var zwiad = parseInt(document.getElementById("zwiad").value);
var lk = parseInt(document.getElementById("lekka").value);
var lnk = parseInt(document.getElementById("lukkon").value);
var ck = parseInt(document.getElementById("ciezka").value);
var tarany = parseInt(document.getElementById("taran").value);
var katasy = parseInt(document.getElementById("katas").value);
var rycek = parseInt(document.getElementById("rycek").value);
var grubasy = parseInt(document.getElementById("gruby").value);
var zagrodaNaWojsko = piki + miecze + topy + luki + 2*zwiad + 4*lk + 5*lnk + 6*ck +  5*tarany + 8*katasy + 10*rycek + 100*grubasy;

Tutaj jest chyba kluczowy fragment.

 

Finalnie rozwiązałbym to tak:

if(document.getElementById("checkbox").checked){
    let wartosc = parseInt(document.getElementById("grubas").value);
    //etc
}

 

---

Zaraz poprawię, a jakieś jeszcze rady/uwagi masz? Chętnie bym jakieś usłyszał tak na zaś ;D

---

@pawi125,

Trochę pozmieniałem na szybko, w dobrym kierunku idę? ;D

link do pastebin

---

Przede wszystkim Twoja funkcja liczy 100 lini... to jest o jakies 80 lini za dużo :)

Masz kilka ifów, które defacto nic nie robią...

if(czyPlony == true)
{
    plony = 1;
}
else
{
    plony = 0;
}

//lub

if(koczownicza == true)
{
    koczo = 1;
}
else
{
    koczo = 0;
}

zawsze mozesz zrobic oddzielna funkcje ktora bedzie odpowiadac za pobieranie danych do Twoich zmiennych. Funkcja oblicz nie powinna odpowiadać za pobieranie zmiennych.

if(document.getElementById("czyRycerz").checked && poziomPiedestalu!=0) zagrodaNaBudynki += zagrodaPiedestal;
if(document.getElementById("czyKosciol").checked && poziomPKosciola!=0) zagrodaNaBudynki += zagrodaPKosciol;

Tutaj masz jakiś fragment kodu który ma jakaś logike - mi narazie nie znaną... ale takie fragmenty kodu powinieneś wyizolować do innej funkcji która nazwałbyś adekwatnie do tego co tutaj sprawdzasz :)

 

Pozatym może to być ciężkie ale używaj języka angielskiego w kodzie :)

Fajnie, że używasz pastlebina - wiele osob o tym zapomina, ale są fajniejsze narzędzia do pokazywania kodu np: codepen lub codesandbox

---

a jak mam wykorzystać zmienne w funkcji, to mogę je zapisać w innej funkcji? jak taki zapis miałby wyglądać? zawsze myślałem, że zmienna istnieje tylko w funkcji w której została zdefiniowana

---

Zmienne typu var są widoczne globalnie, zmienne typu const, let są widoczne lokalnie.

Możesz pomyśleć nad podejściem obiektowym - wtedy tworzysz klasę w której definiujesz zmienne a potem manipulujesz nimi w konkretnych metodach - znajdujących się w tej klasie.

---

Trochę poczytałem i doszedłem w końcu do jakichś wniosków. Kompletnie nie ogarniam tego obiektowego :D