Pomoc, ne znam zasto mi ne rade funkcije

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

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.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Uh, ne mozes da preskaces lekcije 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).

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

E sad bih opsovao . 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.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Da probaš Google?

• 1Ovo se svidja korisniku: Rastafarii
  
  Registruj se da bi pohvalio/la poruku!

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).

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

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.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Taman sam to hteo da napisem

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Naidjoh na jos jedan problem . 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?

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

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

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.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Citat:U JS-u ovo mozda i ima smisla, u PHP-u je ogromna razlika izmedju jednostrukih i dvostrukih navodnika
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).