Przelicznik kuchenny - javascript

Question

Witam,

zaczynam swoją przygodę z javascriptem i pracuję aktualnie nad stworzeniem prostego przelicznika kuchennego w połączeniu z HTML. Udało mi się zacząć i przygotować "pierwowzór" przelicznika, gdzie po wybraniu danego produktu z listy, skrypt odpowiednio przelicza proporcje (szklanka-gramy). O ile przy tylko jednym produkcie skrypt przelicza prawidłowo, to przy dodaniu kolejnych, przelicza tylko ten ostatni. Czy mógłbym liczyć na Waszą pomoc/sugestię w tym temacie? Co zrobić, aby kod poprawnie obliczał każdą (inną i zależną od produktu) wartość? Być może powinienem zrobić to inaczej? Z góry dziękuję bardzo za odpowiedź.

Piotr

 

<script>
function admSelectCheck(nameSelect)
{
    if(nameSelect){
        admOptionValue = document.getElementById("admOption").value;
        var elems = document.getElementsByTagName("div");
        for (var i = 0; i < elems.length; i++) {
            console.log(i);
            elems[i].style.display = "none";
        }
        console.log(nameSelect.value);
        var selected = document.getElementById("admDivCheck"+nameSelect.value);
        if (selected) selected.style.display = "block";
    }
    else{
        console.log("bad");
        document.getElementById("admDivCheck").style.display = "none";
    }
}

</script>




<h1>Przelicznik kulinarny</h1>



<select id="getFname" onchange="admSelectCheck(this);">
<option value="5" selected="selected">Mąka pszenna</option>
<option value="6">Mąka żytnia</option>
<option value="7">Mąka gryczana</option>
<option id="admOption" value="11">Admin</option>
</select>


<div id="admDivCheck11" style="display:none;">
admin selected
 </div>

<div id="admDivCheck5" style="display:block;">


<p>Wybierz ilość mąki pszennej, którą chcesz przeliczyć</p>

<p><input id="pszenna1" onkeyup="convert('pszenna1')"> Ilość szklanek</p>

<p><input id="pszenna2" onkeyup="convert('pszenna2')"> Ilość gram</p> 


<script>
function convert(degree) {
    var x;
    if (degree == "pszenna1") {
        x = document.getElementById("pszenna1").value * 130 * 1,92;
        document.getElementById("pszenna2").value = Math.round(x);
    } else {
        x = (document.getElementById("pszenna2").value /130);
        document.getElementById("pszenna1").value =(x).toFixed(2);
    }
     }


</script>

 </div>




<div id="admDivCheck6" style="display:none;">


<p>Wybierz ilość mąki żytniej, którą chcesz przeliczyć</p>

<p><input id="zytnia1" onkeyup="convert('zytnia1')"> Ilość szklanek</p>

<p><input id="zytnia2" onkeyup="convert('zytnia2')"> Ilość gram</p> 


<script type="text/javascript">
function convert(degree) {
    var x;
    if (degree == "zytnia1") {
        x = document.getElementById("zytnia1").value * 120 * 1,92;
        document.getElementById("zytnia2").value = Math.round(x);
    } else {
        x = (document.getElementById("zytnia2").value /120);
        document.getElementById("zytnia1").value =(x).toFixed(2);
    }
   
   
   }


</script>
 </div>

 
 
 <div id="admDivCheck7" style="display:none;">


<p>Wybierz ilość mąki gryczanej, którą chcesz przeliczyć</p>

<p><input id="gryczna1" onkeyup="convert('gryczna1')"> Ilość szklanek</p>

<p><input id="gryczna2" onkeyup="convert('gryczna2')"> Ilość gram</p> 


<script>
function convert(degree) {
    var y;
    if (degree == "gryczna1") {
        x = document.getElementById("gryczna1").value * 140 * 1,92;
        document.getElementById("gryczna2").value = Math.round(x);
    } else {
        x = (document.getElementById("gryczna2").value /140);
        document.getElementById("gryczna1").value =(x).toFixed(2);
    }
    
    
}

</script>

 </div>

 

Answer 1

Cześć, coś jest nie tak z architekturą programu - wrzuć cały js w jeden plik. Dziwi mnie wielokrotna deklaracja tej samej funkcji convert() - nie tak to powinno wyglądać.

BTW - zamiast document.getElementById zrób funkcję _(id) { return document.getElementById(id)} - będzie łatwiej

Comments

Dziękuję bardzo za pomoc! Główny problem, zgodnie z sugestią, leżał  po stronie wielokrotnego użycia funkcji convert(). Pozdrawiam :)

---

Koledze wyżej prawdopodobnie chodziło o to że najprościej mówiąc mieszasz html'a, z jsem w jednym pliku. Co jest praktyką bardzo nie cacy, przy bardziej złożonej aplikacji rozmieszczając kod w taki sposób, znalezienie błedu bedzie wymagało znacznie wiekszych nakładów czasu, pracy oraz bedzie poprostu trudniejsze. A w raz z wieksza ilościa kodu, róznymi modyfikacjami ...

---

Dokładnie, cały JS przy takim małym programie można wepchnąć w jeden plik i go zlinkować przed </body>