Wątek przeniesiony 2014-05-09 18:39 z Webmastering przez ŁF.

Wypisanie policzonej wartości w js

0

Witam,
jestem zupełnie zielony w kwestii js. Przedstawiony niżej kod jest próbą przerobienia czegoś co wcześnie stworzyłem w C# (działało jak należy). Chodzi mi o to aby w kontenerze 3 wyświetlała się wartość cost. Nie jestem pewien czy same obliczenia i tablice są wykonane poprawnie.

 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="description" content="mobilna myjnia parowa z dojazdem klienta"/>
<meta name="keywords" content="mobilna myjnia parowa dojazdem klient samochód pranie tapicerka czyszczenie dezynfekcja"/>
<title>Mobilna Myjnia parowa z dojazdem do Klienta</title>

<link rel="stylesheet" href="style/reset.css" type="text/css" />
<link rel="stylesheet" href="style/style.css" type="text/css" />
<link rel="stylesheet" href="style/colorbox.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
</head>

<body>

<div id="head">
        <nav>
        <ul>
          <li><a href="index.aspx">Home</a></li>
          <li><a href="coaching.aspx">Coaching</a></li>
          <li><a href="faq.aspx">FAQ</a></li>
          <li><a href="calc.aspx">Calculator</a></li>
          <li><a href="contact.aspx">Contact</a></li>          
        </ul>
      </nav>
    </div>
  <div id="wrapper">
    <div id="content-wrapper">
      <div id="content">
<div id="kontener_glowny" style="width:600px; margin:0 auto;">

<div id="kontener_1" style="float:right; width:200px; text-align:center">
                    <h3>Goal division:</h3>

                    <select id="tl" onchange="check()">
                        <option value="0">Bronze</option>

                        <option value="1">Silver</option>

                        <option value="2">Gold</option>

                        <option value="3">Platinum</option>

                        <option value="4">Diamond</option>
                    </select>

			
			        <select id="td" onchange="check()">
                        <option value="0">V</option>

                        <option value="1">IV</option>

                        <option value="2">III</option>

                        <option value="3">II</option>

                        <option value="4">I</option>
                    </select>
    <br />
    <br />
                    <img src="img/0.png" alt="some_text">
    <br />
</div>

    <div id="kontener_3" style="float:right; width:200px; text-align:center">
        <br />
        <br />
        <script type="text/javascript">
            function check() {
                var vfl = document.getElementByValue("fl");
                var vfd = document.getElementByValue("fd");
                var vtl = document.getElementByValue("tl");
                var vtd = document.getElementByValue("td");
                var tab = [];
                tab[0] = [0, 35, 70, 105, 140];
                tab[1] = [185, 230, 275, 320, 365];
                tab[2] = [425, 480, 535, 590, 645];
                tab[3] = [720, 810, 900, 990, 1080];
                tab[4] = [1215, 1340, 1480, 1635, 1805];
                var cost = tab[fl][fd] - tab[tl][td];
            }
            document.write("<I>cost</I> zł" + cost);
            </script>
            <br />
            <br />
        </div>

    <div id="kontener_2" style="float:left; width:200px; text-align:center">
                        <h3>Current division:</h3>

        <select id="fl" onchange="check()">
            <option value="0">Bronze</option>

            <option value="1">Silver</option>

            <option value="2">Gold</option>

            <option value="3">Platinum</option>

            <option value="4">Diamond</option>
        </select>


        <select id="fd" onchange="check()">
            <option value="0">V</option>

            <option value="1">IV</option>

            <option value="2">III</option>

            <option value="3">II</option>

            <option value="4">I</option>
        </select>
        <br />
        <br />
                        <img src="img/0.png" alt="some_text">
                        <br />

    </div>


    </div>

          </div>
            <aside>
            <section>
              <h2>Galeria</h2>
              <ul class="sidebar-gallery">
                <li><a class="colorbox" rel="myjnia" href="img/photo1.jpg"><img src="img/thumb1.jpg" alt="" /></a></li>
                <li><a class="colorbox" rel="myjnia" href="img/photo2.jpg"><img src="img/thumb2.jpg" alt="" /></a></li>
                <li><a class="colorbox" rel="myjnia" href="img/photo3.jpg"><img src="img/thumb3.jpg" alt="" /></a></li>
                <li><a class="colorbox" rel="myjnia" href="img/photo4.jpg"><img src="img/thumb4.jpg" alt="" /></a></li>
              </ul>
            </section>
            </aside>

        </div>
         <footer>
            <nav class="right">
              <ul>
                <li><a href="index.aspx">Home</a></li>
                <li><a href="contact.aspx">Contact</a></li>
              </ul>
            </nav>
            <nav class="left">
            </nav>
          </footer>

      </div> <!-- wrapper -->

    <script type="text/javascript">
        $(document).ready(function () {
            $('a.colorbox').colorbox({ speed: 500, opacity: 0.7 });
        });

        </script>



</body>
</html>
0 
                var vfl = document.getElementByValue("fl"); 
                var vfd = document.getElementByValue("fd"); 
                var vtl = document.getElementByValue("tl");
                var vtd = document.getElementByValue("td");
                var tab = [];
                tab[0] = [0, 35, 70, 105, 140];
                tab[1] = [185, 230, 275, 320, 365];
                tab[2] = [425, 480, 535, 590, 645];
                tab[3] = [720, 810, 900, 990, 1080];
                tab[4] = [1215, 1340, 1480, 1635, 1805];
                var cost = tab[fl][fd] - tab[tl][td];

zamiast getElementBYValue, uzyj GetElementById, poza tym najpierw tworzysz zmienna "vfl" a potem odwolujesz sei do niej jako do "fl" ktora nie istnieje. We wszystkich czterech wartosciach tak jest.

0

odwolujac sie do fl chcialem, zeby pobieral aktualnie wybrana opcje z dropdownmenu i zapisywal jej wartosc do vfl. id opcji jest numerowane od 0? i czy samo wypisywanie jest poprawne?

0

document.write("<I>cost</I> zł" + cost);

nie powinno się używać document.write (poza przypadkami, kiedy można), lepiej użyć np. innerHTML, a jeśli i tak dołączasz bibliotekę jQuery, to możesz użyć czegoś takiego

$("#id-kontenera").html("<I>cost</I> zł" + cost);

no i to raczej powinno być w funkcji check, bo inaczej się nie zaktualizuje.

Aha, no i lepiej wrzucaj kod na coś w rodzaju jsfiddle.net, czy inną stronę, która pozwoli innym użytkownikom od razu zobaczyć jak to wygląda w działaniu.

0

jak dasz fl to nie jest to automatycznie odwolanie do wartosci obiektu o id = "fl". Najpierw poszukaj jak pobrac obiekt w js, potem jak pobrac zaznaczona wartosc obiektu select w js, a potem ta wartosc przypisz do zmiennej i jej uzywaj jako indeksu w tablicy, a poza tym korzystaj sobie bardziej z console.log(costam), wtedy ladnie ci pokaze co dany obiekt zawiera.

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