XAMPP jak otworzyć JS

pytanie zadane 25 stycznia 2017 w JavaScript przez klap Początkujący (410 p.)
zmienione kategorie 25 stycznia 2017 przez Eryk Andrzejewski

Cześć, chcę umieścić na stronie zdjęcie, że jak się na nie kliknie to się zmieni się na inne. Chcę to odpalić przez localhost XAMPPa tylko po włączeniu pokazuje mi się tylko puste okienko, że niby tam jest zdjęcie. Pewnie mój kod wymaga poprawki ale jestem początkująca i za bardzo nie wiem co zrobić. Proszę o porady.

Dziękuję za poświęcony czas.

mój kod :

<!DOCTYPE HTML>

<html>
    <head>


        <script>
var tImg = ['1.jpg','2.jpg'];
        
var vImg = true;
function fSetImg(){
    if (vImg){
        document.getElementById('iImg').src = tImg[1];
        vImg = false;
    }
    
    else {
        document.getElementById('iImg').src = tImg[0];
        vImg = true;
    }
}
        </script>
    </head>
    <body>

        <img id="iImg" src="1.jpg" onclick="fSetImg()">

    </body>
</html>

2 odpowiedzi

odpowiedź 25 stycznia 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)

Użyj konsoli z dev-toolsów w przeglądarce. Sprawdź, czy ścieżka do obrazka jest poprawna. Zobacz czy nie wyrzuca żadnych błędów. Tools włączyć za pomocą ctrl - Shift - I w Google Chrome. Jeżeli ścieżki są ok(obrazki znajdują się w tym samym folderze) spróbuj podmienić je na postać

./nazwaobrazka.jpg

Przesuń cały script na koniec body. Bo może problemem jest to, że script działa zanim się jeszcze wyrenderuje.

A tak w ogóle to do czego Ci xampp przy nauce js?

komentarz 25 stycznia 2017 przez Arkadiusz Fus Obywatel (1,100 p.)

Skrypt nie zadziała zanim się wyrenderuje. Dlaczego ?

Bo onclick="fSetImg()" Czyli funkcja wykona się dopiero po kliknięciu :)

komentarz 25 stycznia 2017 przez klap Początkujący (410 p.)

Już działa :) ja się go nie uczę :( to znaczy chciałam ale teraz mam pilnie zrobic projekt i potrzebuje paru rzeczy no a w samym php nie da się wszystkiego, np tego :(

A jeśli będę chciała wstawić parę takich obrazków to skryptu juz nie modyfikuję tylko w sekscji body dodaje pewne ustalenia tak? Czy źle rozumiem cała metodykę tworzenia? :)

komentarz 25 stycznia 2017 przez Arkadiusz Fus Obywatel (1,100 p.)

Jak dobrze zrozumiałem pytanie to:

"obrazki" czyli ich nazwę przechowujesz w

var tImg = ['1.jpg','2.jpg'];

i jak dodasz tam

var tImg = ['1.jpg','2.jpg','3.jpg'];

To będziesz mieć ich nazwę dostępną, ale Twój kod zamienia tylko dwa pierwsze obrazki, czyli nie ważne ile będziesz mieć obrazków to będą się zamieniać tylko dwa pierwsze.

I jak dodasz jakiś inny obrazek w sekcji body np.:

<img id="iImg" src="4.jpg" onclick="fSetImg()">

To on się po kliknięciu zamieni na 2.jpg

Nie wiem czy o to Ci chodzi :D

komentarz 25 stycznia 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)

Jeżeli chcesz kilka takich samych, tak samo działających obrazków, to możesz dać kilka obrazków w sekcji body i do każdego dasz tę funkcję w onclicku. Możesz też dać tablicę z nazwami jako parametr, to wtedy możesz różne obrazy wczytywać

komentarz 25 stycznia 2017 przez klap Początkujący (410 p.)

Mi właśnie chodzi o to że mają być w rzędzie pięć obrazków niezależnych. Na każdy jak kliknę to pojawi się co innego. I właśnie próbuję to zrobić ale nie mam pojęcia jak :(