Pomoc, ne znam zasto mi ne rade funkcije

1

Pomoc, ne znam zasto mi ne rade funkcije

offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1178

Pozdrav!

Nov sam u JS i skoro nista ne znam, ali pocinjem da shvatam neke osnove. U sledecem kodu mi nije jasno zasto JS kod ne radi. Evo ga kod:

HTML
<div id="mama"></div>

CSS
#mama {    width: 100%;    height: 1000px; }

JS
<script type="text/javascript">       document.getElementById("mama").style.backgroundColor = "lightblue";    </script>

Ovaj JS kod sam ubacio u head tag. Ako treba ceo kod poslacu ga.



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3745
  • Gde živiš: 127.0.0.1

Uh, ne mozes da preskaces lekcije Wink U trenutku kada se taj JS iz <head> taga izvrsava, a to je "odmah", DOM nije u potpunosti (ili uopste) ucitan, sto za rezultat daje da element sa tim ID-em ne postoji. Prebaci JS neposredno ispred </body> taga, i radice.

Usput, nije bas pozeljno da boje definises imenom, jer tako ostavljas browseru da on sam odluci koja boja je tacno "lightblue". Mnogo je bolje da za to koristis hex zapis (#add8e6).



offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1178

E sad bih opsovao Very Happy. To sam prvo probao i ne znam zasto mi nije radilo. Onda sam prebacivao u head, pa menjao sa Id na IdName, menjao sve iz ID-a u klase, je*avao se sa svacim, i idalje ne znam zasto mi ranije nije radilo. Hvala u svakom slucaju. Eh, da, ovo za boje, to znam nego mi je to samo bio primer.

Inace, siguran sam da ce ova tema biti aktivna sa moje strane, jer pocinjem da ucim JS i nailazicu na razne probleme.

Sledece pitanje je sta je bolje?
document.getElementById("nekiID")
ili
document.getElementById('nekiID')

Razlika je u navodjenu ID-a, odnosno da li treba da se koristi "" ili ''? Probao sam i oba rade.

offline
  • Milan
  • Pridružio: 17 Dec 2007
  • Poruke: 14809
  • Gde živiš: Niš

Da probaš Google? Very Happy

offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4575

Možeš da odložiš izvršavanje neke funkcije dok se ne kreira DOM pomoću event listener-a prikačenog za dokument.

document.addEvenetListener("DOMContentLoaded", function() {     // ... });

A inače, ništa nije bolje. Dobro bi bilo samo da se, kada izabereš da li ćeš da koristiš jednostruke ili dvostruke navodnike, toga i držiš nadalje. Ja preferiram jednostruke jer se brže kucam kod (za dvostruke moraš da držiš i Shift).

offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1178

Napisano: 19 Feb 2018 20:12

Opet sam naisao na problem. Evo ga kod:

HTML

<!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="css/style.css">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    <!--https://www.w3schools.com/icons/fontawesome_icons_intro.asp--> </head> <body>       <div class="container">          <div class="head"></div>          <div class="opacity"></div>          <div class="heading">             <h1>Welcome to</h1>             <h2>world greatest private <br> car collection</h2>             <h2 class="desp">Hope that you will like what we have to offer</h2>             <nav class="navbar">                <ul>                   <li class="active"><a href="index.html">Home</a></li>                   <li><a href="index.html">Owner</a></li>                   <li><a href="index.html">Gallery</a></li>                   <li><a href="index.html">Location</a></li>                   <li><a href="index.html">Contact</a></li>                   <li><button onclick="alert()">BUTTON</button></li>                </ul>             </nav>          </div>          <section class="section-a">             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quod necessitatibus natus optio nemo eligendi et dignissimos, illo tenetur sapiente quae, cumque nam rem. Error maxime fugit laudantium ad ab, atque exercitationem aliquid quibusdam natus eveniet eius at obcaecati placeat, provident consequuntur molestias similique veritatis sed suscipit accusantium. Similique, sequi!</p>          </section>          <section class="section-b">             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora perspiciatis quae tempore recusandae consequuntur fugit perferendis incidunt alias omnis totam libero culpa minus, ratione maxime necessitatibus eius dolorem itaque natus mollitia sed nostrum. Nostrum voluptates esse harum magni eos nihil fugiat neque quia perspiciatis aspernatur, alias nobis quis asperiores explicabo.</p>          </section>          <div id="mama"></div>       </div>       <script src="js/main.js"></script> </body> </html>

CSS

body, html {    height: 100%;    margin: 0;    padding: 0; } @font-face {     font-family: NewBaskerville;     src: url(../assets/NewBaskervilleFONT/NewBaskervilleStd-SemiBoldIt.otf); } @font-face {     font-family: Airstrike;     src: url(../assets/Airstrike/airstrike.ttf); } @font-face {     font-family: SpaceRanger;     src: url(../assets/SpaceRanger/spaceranger.ttf); } @font-face {     font-family: SweetHipster;     src: url(../assets/SweetHipster/sweethipster.ttf); } @font-face {     font-family: Hughs;     src: url(../assets/Hughs/Hughs.otf); } .container {    width: 100%;    height: 100%;    position: relative; } .head {    margin: 0;    width: 100%;    background-image: url(../images/header.png);    background-repeat: no-repeat;    height: 100%;    background-position: center;    background-size: cover;    background-attachment: fixed; } .heading {    width: 100%;    position: absolute;    top: 0;    left: 0;    height: 100%; } .heading h1 {    position: absolute;    color: #e81212;    margin: 0;    font-size: 90px;    font-family: Hughs;    letter-spacing: 6px;    top: 20%;    left: 5%; } .heading h2 {    position: absolute;    margin: 0;    color: #fff;    font-size: 50px;    font-family: Hughs;    letter-spacing: 6px;    top: 42%;    left: 6%; } .heading .desp {    position: absolute;    margin: 0;    color: #fff;    font-size: 30px;    font-family: Hughs;    letter-spacing: 6px;    top: 77%;    left: 6%;    padding: 0; } .opacity {    background-color: black;    height: 100%;    width: 100%;    opacity: 0.6;    position: absolute;    top: 0;    right: 0;    margin: 0; } .navbar {    width: 100%;    margin: 0;    /*background-color: #8c2c02;*/    background-color: #000;    opacity: 0.7;    padding: 0;    position: fixed;    border-bottom: 1px solid #a30e0e; } .navbar ul {    list-style: none;    display: inline-block;    padding: 0;    margin: 0;    width: 100%; } /*--------------------------*/ #mama {    width: 100%;    height: 1000px;    background-color: #a30e0e; } /*--------------------------*/ .navbar ul li {    display: inline-block;    padding: 30px 50px;    margin: 0; } .navbar ul li:hover {    background-color: #a30e0e;    transition: 0.25s linear all;    cursor: pointer; } .navbar ul li:first-child {    padding-left: 6%; } .navbar ul li a {    text-align: center;    text-decoration: none;    color: white;    margin: 0;    padding: 0; } .navbar ul .active a {    color: #fc0000;    font-weight: bold; } .navbar ul .active:hover a {    color: white; } .section-a {    text-align: left;    color: #fff;    background-color: #000;    padding: 30px 150px; } .section-b {    text-align: right;    color: #000;    background-color: #fff;    padding: 30px 150px; }

JS

document.getElementById("mama").style.backgroundColor = 'green'; function alert(){    alert('Hello world!'); }

Ja sam napravio eksterni JavaScript fajl i pozvao ga pred sam kraj body sekcije. U JS sam napisao funkciju i pozvao je u onclick kod button-a u navigaciji. Nije mi jasno zasto ne radi funkcija alert. Takodje u JS imam komandu da mi oboji poslednju sekciju u zelenu i to radi tako da mislim da nije greska u pozivanju JS u HTML dokumentu.

Dopuna: 19 Feb 2018 20:18

Izgleda da je greska bila to sto funkciji ne mogu da dam ime alert, jer je to izgleda rezervisana rec.

offline
  • Pridružio: 02 Sep 2003
  • Poruke: 4955

Taman sam to hteo da napisem

offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1178

Naidjoh na jos jedan problem Very Happy. Zasto nece da mi promeni boju navigacije preko klase?

HTML

<nav class="navbar">       <ul>          <li class="active"><a href="index.html">Home</a></li>          <li><a href="index.html">Owner</a></li>          <li><a href="index.html">Gallery</a></li>          <li><a href="index.html">Location</a></li>          <li><a href="index.html">Contact</a></li>       </ul>    </nav>

JS

document.getElementByClassName("navbar").style.backgroundColor = 'green';

Ako nav tagu dodam neki id onda mi promeni, ali preko klase nece. Gde gresim?

offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3745
  • Gde živiš: 127.0.0.1

Napisano: 19 Feb 2018 21:20

E.L.I.T.E. ::kada izabereš da li ćeš da koristiš jednostruke ili dvostruke navodnike, toga i držiš nadalje. Ja preferiram jednostruke jer se brže kucam kod (za dvostruke moraš da držiš i Shift).

U JS-u ovo mozda i ima smisla, u PHP-u je ogromna razlika izmedju jednostrukih i dvostrukih navodnika Wink

Dopuna: 19 Feb 2018 21:23

@Milos ZA: slobodno otvori konzolu dok vezbas (F12, Console tab), ima tamo svakakvih korisnih informacija. Ovo sto si ti napisao bi dalo sledecu gresku:

Uncaught TypeError: document.getElementByClassName is not a function

jer getElementByClassName ne postoji. Postoji getElementsByClassName koja vraca niz elemenata koji imaju tu klasu.

offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4575

Citat:U JS-u ovo mozda i ima smisla, u PHP-u je ogromna razlika izmedju jednostrukih i dvostrukih navodnika Wink
Svakako, na JS sam i mislio. Obično se kod tipiziranih jezika jednostruki koriste za karaktere, a dvostruki za stringove (i kod dvostrukih u PHP-u je moguća interpolacija dok kod jednostrukih nije; za to se u JS koriste tzv. back quotes, ali tek od ES6).

Ko je trenutno na forumu
 

Ukupno su 641 korisnika na forumu :: 11 registrovanih, 2 sakrivenih i 628 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: Dorcolac, esx66, havoc995, hooraay, milenko crazy north, minmatar34957, pacika, suton, uruk, voja64, zziko