Forum Mjukvara Programmering och digitalt skapande Tråd

Javascript i separat fil

1
Skriv svar
Permalänk
Medlem
●

Javascript i separat fil

Hej

Jag behöver skriva ett javascript. Jag tänkte använda detta exempel.

https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

Problemet är att jag måste ha själva javascriptet i en separat fil som heter script.js Men jag vet inte vilken av dessa koder ska in i den filen och vilket kod ska in i html koden.

I min footer.php så har jag denna text <script src="<?php echo get_template_directory_uri(); ?>/script.js"></script>

Kan ni förstå min fråga?

Tacksam för hjälp.

/Jenny

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Hej,

Vanligaste är lägga referensen till filen i HEAD taggen på HTML sidan

<head>
<script src="myScript.js"></script>
</head>

Denna sida har fler exempel(titta längre ner)

https://www.w3schools.com/js/js_whereto.asp

// LZ

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Head eller body, head är vanligast men body är inte fel.

Skillnaden blir att skriptet körs vid olika tidpunkter, du kan läsa mer om det här: https://stackoverflow.com/questions/17106462/whats-the-differ...

Visa signatur

Stationär: Core i9 13900k | Asus X790 ROG Strix Gaming-F | 32GB DDR5 | GeForce RTX 5090 | Lian Li PC-O11 dynamic evo
Laptop: Macbook Pro 16" | Apple M1 Max

Redigera
Citera flera Citera
Permalänk
Medlem
●

För att använda en separat fil behöver JavaScript skrivas på lite annat sätt.
Jag skrev om exemplet du länkade till för att visa principen.

Index.html

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button id="buttonOn">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button id="buttonOff">Turn off the light</button>

<script src="script.js"></script>

</body>
</html>

script.js

const buttonOn = document.getElementById('buttonOn');
const buttonOff = document.getElementById('buttonOff');

buttonOn.addEventListener('click', function() {
    document.getElementById('myImage').src='pic_bulbon.gif';
});

buttonOff.addEventListener('click', function() {
    document.getElementById('myImage').src='pic_bulboff.gif';
});

Index.html, script.js, pic_bulbon.gif och pic_bulboff.gif måste ligga i samma mapp och på samma nivå.

Ser att du hänvisar till footer.php vilket kanske betyder att det är en Wordpress-sida du har.
Kan inte mycket om Wordpress men exemplet ovan gäller för vanlig HTML och JavaScript.

Visa signatur

Herman

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Lägg <script src="script.js" defer></script> i head.
Dessutom rekommenderar jag querySelector framför getElementById.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hur kan jag göra denna kod i sen separat fil.

<button class="printbutton" onclick="window.print()">Skriv ut</button>

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av DataJenny:

Hur kan jag göra denna kod i sen separat fil.

<button class="printbutton" onclick="window.print()">Skriv ut</button>

Gå till inlägget

Du har ju koden annars där i html-filen?

Men :

<button class="printbutton" id="print">Skriv ut</button>

och sedan i js-filen

document.getElementById('print').addEventListener('click',function() {
window.print();
});

borde väl fungera.

edit: kom på att det kanske är meningen att du ska ha kvar onclick, men kalla en funktion istället därifrån?
isåfall

<button onclick="print()">print</button>

och i din javascriptfil:

const print = () => {
window.print()
}

Senast redigerat
Visa signatur

I5 9600k@stock / Cooler Master Evo 212 / Gigabyte Z390 Gaming X / Corsair Vengeance LPX 16GB DDR4 3000MHz / MSI RTX2070 Gaming Z / EVGA 550 BQ / Asus VG27BQ 27" 165Hz

Ryzen 5 5600x@stock / Asus Rog Strix X570-E Gaming / Corsair Vengeance RGB Pro 16GB 3600MHz CL18 / MSI RTX3070 Suprim X / BeQuiet Pure Power 11 600W / Asus VG278Q 27" 144Hz

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av CubaCola:

const print = () => {
window.print()
}

Gå till inlägget

Vad betyder const?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av DataJenny:

Vad betyder const?

Gå till inlägget

Ett tips är att läsa dokumentationen.

Kort sagt innebär det att en variabel som deklarerats med const inte kan tilldelas något annat värde.

Visa signatur

AMD Ryzen 7 1700X 3.8 GHz 20MB | ASUS PRIME X370-PRO | MSI GeForce GTX 1080 Gaming X 8GB | G.Skill 16GB DDR4 3200 MHz CL14 Flare X | Corsair RM650x 650W

Redigera
Citera flera Citera
1
Skriv svar