Plaatje laten zien met simpel HTML

vrijdag 21 januari 2022 11:03

Acties:

0 Henk 'm!

Topicstarter

Mijn vraag

Ik wil naar aanleiding van de dag van de week een image laten zien, gewoon simpel HTML.

Ik krijg het niet voor elkaar, de vraag is dus, hoe laat ik met simpel HTML een plaatje zien?

code:

<html>
<head>

    <title>
        Prima
    </title>

<script LANGUAGE="JavaScript" TYPE="text/javascript">

const d = new Date();

let day = d.getDay();

if(day == 1)
    {

    <img src="https://site.nl/zaterdag1.jpg">;
    document.write(day);

    } else {
        document.write("anders");
    }

</script>

</head>

<body>

</body>

</html>

Relevante software en hardware die ik gebruik

Wat ik al gevonden of geprobeerd heb

Google, HTML sites.

vrijdag 21 januari 2022 11:08

Acties:

+1 Henk 'm!

TERW_DAN

Met een hamer past alles.

In bovenstaande code doe je niets met je plaatje. Het enige dat je doet is of 1 of anders schrijven, meer niet.
Dit kan op vele manieren, ik zou de innerHTML van het element waar je het plaatje in wil laten zien veranderen naar de HTML van dat plaatje. Dan werkt het waarschijnlijk wel.

vrijdag 21 januari 2022 11:09

Acties:

+2 Henk 'm!

al7181

Een goede bron van informatie is W3Schools.
ZIe https://www.w3schools.com/js/default.asp

vrijdag 21 januari 2022 11:16

Acties:

+1 Henk 'm!

Creepy

Tactical Espionage Splatterer

Je hebt zeker een error daar gekregen want de Javascript code is niet correct. Welke error was dat en waar dacht je vervolgens dat het mis zou kunnen zijn?

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

vrijdag 21 januari 2022 11:16

Acties:

0 Henk 'm!

JJ Le Funk

:twk

Misschien heb je hier wat aan om de juiste dag te pakken (vervang document.write met een functie die de URL in de IMG tag lepelt). Je kan de dag-waarde koppelen aan een bestand. Bijv. 1.jpg (maandag), 2.jpg (dinsdag), etc. Zondag is dag 0.

code:

<html>
   <head>
      <title>JavaScript Weekdag in base URL</title>
   </head>
   
   <body>
   
      <script type = "text/javascript">

        var getUrl = window.location;
        var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
        var dt = new Date(Date.now());
        document.write(baseUrl+/weekdag/+dt.getDay()+".jpg"); 
      </script>
      
   </body>
</html>

[ Voor 40% gewijzigd door JJ Le Funk op 23-01-2022 18:19 ]

d:)b

vrijdag 21 januari 2022 15:31

Acties:

+1 Henk 'm!

al7181

De uitgebreide versie:

code:

<!DOCTYPE html>
<html>
<body>

<h1>Dag van de week</h1>
<hr>

<!-- Het image element op de html pagina.                -->
<!-- De src URL krijgt de waarde adhv de dag van de week -->
<!-- via het script eronder                              -->
<img id="weekdayimg" src="" width=400px>

<script>
// script wat de weekdag ophaalt via getDay() 
// resultaat gebruiken we om dayoftheweekUri te bepalen
let dayoftheweekUri;
switch (new Date().getDay()) {
  case 0:
    dayoftheweekUri = "https://site.met.afbeelding/images/Sunday.png";
    break;
  case 1:
    dayoftheweekUri = "https://site.met.afbeelding/images/Monday.png";
    break;
  case 2:
    dayoftheweekUri = "https://site.met.afbeelding/images/Tuesday.png";
    break;
  case 3:
    dayoftheweekUri = "https://site.met.afbeelding/images/Wednesday.png";
    break;
  case 4:
    dayoftheweekUri = "https://site.met.afbeelding/images/Thursday.png";
    break;
  case 5:
    dayoftheweekUri = "https://i.redd.it/jnb2qtqu7mg01.jpg";
    break;
  case 6:
    dayoftheweekUri = "https://site.met.afbeelding/images/Saturday.png";
}

// Daarna vervangen we het van image element met id "weekdayimg" de src waarde
// en wordt het betreffende figuur getoond.
document.getElementById("weekdayimg").src= dayoftheweekUri;
</script>

</body>
</html>

vrijdag 21 januari 2022 16:15

Acties:

0 Henk 'm!

AW_Bos

Liefhebber van nostalgie... 🕰️

Wat @al7181 zegt.
Gebruik liever die manier om de DOM, de HTML-structuur, aan te passen i.p.v. dat je op de juiste plek document.write() gebruikt. Die functie is iets uit de 90'er jaren.

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

maandag 24 januari 2022 08:48

Acties:

+1 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Daarnaast is het motto hier:

Give a man a fish and feed him for a day, teach a man how to fish and feed him for a lifetime

Dus het zou tof zijn als er iets minder voorgekauwd zou worden

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

maandag 24 januari 2022 08:55

Acties:

0 Henk 'm!

Oon

al7181 schreef op vrijdag 21 januari 2022 @ 11:09:
Een goede bron van informatie is W3Schools.
ZIe https://www.w3schools.com/js/default.asp

W3schools is een goede bron als snelle referentie als je al kunt programmeren, maar een erg slechte leerbron die vaak verouderde of gewoon foutieve informatie voorkauwt (1 2 3. Lijkt me voor TS niet ideaal.

TS kan beter een basiscursus JS gaan doen, want behalve spoonfeeden kunnen we hier weinig mee

maandag 24 januari 2022 08:59

Acties:

0 Henk 'm!

YakuzA

Wat denk je nou zelluf hey :X

Oon schreef op maandag 24 januari 2022 @ 08:55:
[...]

TS kan beter een basiscursus JS gaan doen, want behalve spoonfeeden kunnen we hier weinig mee

Aangezien TS uit de OP niet laat blijken dat die weet dat die met JavaScript bezig is ipv met ‘simpel HTML’ lijkt me dat inderdaad een prima advies

Death smiles at us all, all a man can do is smile back.
PSN

dinsdag 25 januari 2022 09:46

Acties:

0 Henk 'm!

yourservice

Topicstarter

Bedankt voor de heldere uitleg, ben jarenlang programmeur geweest, HTML, Javascript, PHP, de hele mikmak maar dat is inmiddels bijna 15 jaar terug en dus erg roestig. Ik begrijp iig weer wat er staat en hoe verder.

Het motto moet zijn:

Give a man a fish and feed him for a day, teach a man how to fish and YOU feed him for a lifetime!

Als deze visserman echter al een tijdje gepensioneerd is duurt het even voordat hij de slag weer te pakken heeft. Ik zie dit als deze nieuwe poging de slag weer te pakken te krijgen.

Nogmaals dank!

Vraag

Alle reacties