14. november 2021 - 11:09 Der er 1 kommentar

Interface i HTML til JS regnemaskine

Hej.

Jeg er ved at kode en regnemaskine. Det skal forestille at være en klassisk Tamacotshi.
Jeg vil have den til at blive forskellige humør "Hungry, sad eller bored", alt efter om og hvor meget jeg enten leger eller fodre den.
Mit JS script er helt på plads og kører som det skal, nu mangler jeg bare interfacet. Jeg vil have forskellige JPNG filer / eller gifs til at køre på bestemte tidspunkter.

Jeg har en gif, der skal vises, når den er ked af det. En anden til når den er sulten. Og en tredje til når den keder sig.

Kan I hjælpe mig med, hvordan jeg får interfacet til at vise de tre forskellige billeder/gifs alt efter, hvad humør Tamacotchien er i?

Kan det være jeg måske skal bruge en såkaldt event? Eller en "document.getElementById("imageid").src="xxxxx.jpg".
Og i såfald hvor i koden skal denplaceres?
På forhånd tak.
14. november 2021 - 12:35 #1
Her er min kode med mit forsøg med brug af koden: "document.getElementById("imageid").src="xxxxx.jpg": som ikke virker, i den form jeg har gjort.

Magler der et output også? Plz hjælp

<head>
<title>Airbus flight calculator</title>
</head>
<body>
<h1 id="h1Title">The lil' mascot, Tamacotshi</h1>
<img src="
https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/54adb844-d78c-4a63-9a83-b6229792972b/db22ojd-c1c385c7-ee3a-4c32-9d34-353ed17930e6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU0YWRiODQ0LWQ3OGMtNGE2My05YTgzLWI2MjI5NzkyOTcyYlwvZGIyMm9qZC1jMWMzODVjNy1lZTNhLTRjMzItOWQzNC0zNTNlZDE3OTMwZTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.whCUGjVcQDzeY6ENc3QoAkIirPCUnqdzXNYjcXKpiN4" width="200">
<div>
    <button onclick="eatButtonPressed()">Eat</button>//output??
    <button onclick="playButtonPressed()">Play</button>//output??
</div>
<script>
class Mascot {
level = 1
currentMood = new Happy (this);
eat(){
    this.currentMood.eat()
    console.log("level " + this.level + " mood " + this.currentMood)
}
play(){
    this.currentMood.play()
    console.log("level " + this.level + " mood " + this.currentMood)
}
change(mood) {
this.currentMood = mood
}
}

class Mood {
constructor(mascot) {
this.mascot = mascot;
}
}
class Hungry extends Mood {
toString(){
    return "Hungry"
}
eat() {
console.log("happy")
this.mascot.change(new Happy(mascot));
}
play(){
    console.log("Cannot play with a mascot that is hungry")}
}

class Happy extends Mood {
notEaten = true;
notPlaying = true
toString(){
    return "Happy and notEaten " + this.notEaten + " and notPlaying " + this.notPlaying
}
eat() {
    this.notPlaying=true
if (this.notEaten){
    this.mascot.level++;
    this.notEaten=false;
    document.getElementById("imageid").src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/54adb844-d78c-4a63-9a83-b6229792972b/db22ojd-c1c385c7-ee3a-4c32-9d34-353ed17930e6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU0YWRiODQ0LWQ3OGMtNGE2My05YTgzLWI2MjI5NzkyOTcyYlwvZGIyMm9qZC1jMWMzODVjNy1lZTNhLTRjMzItOWQzNC0zNTNlZDE3OTMwZTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.whCUGjVcQDzeY6ENc3QoAkIirPCUnqdzXNYjcXKpiN4"; 
}
else {
    this.mascot.change(new Bored(mascot));
    document.getElementById("imageid").src="https://www.andlighten.nl/wp-content/uploads/2018/03/Mametchi_sleepy.gif";
}
}
play()
{
    this.notEaten=true
if (this.notPlaying){
    this.mascot.level=this.mascot.level+2;
    this.notPlaying=false;
}
else {
    this.mascot.change(new Hungry(mascot));
    document.getElementById("imageid").src="https://www.andlighten.nl/wp-content/uploads/2018/03/Mametchi_toilet.gif";
}
}
}
class Bored extends Mood {
moreThanAnHour=false;
toString(){
    return "Bored"
}
eat (){
if (moreThanAnHour){
    this.mascot.change(new Happy(mascot));
    document.getElementById("imageid").src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/54adb844-d78c-4a63-9a83-b6229792972b/db22ojd-c1c385c7-ee3a-4c32-9d34-353ed17930e6.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU0YWRiODQ0LWQ3OGMtNGE2My05YTgzLWI2MjI5NzkyOTcyYlwvZGIyMm9qZC1jMWMzODVjNy1lZTNhLTRjMzItOWQzNC0zNTNlZDE3OTMwZTYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.whCUGjVcQDzeY6ENc3QoAkIirPCUnqdzXNYjcXKpiN4";
}
else {
    moreThanAnHour=true;
    console.log("you cannot play with the mascot");
}

play (){
    this.mascot.change(new Happy(mascot));
}
}
let mascot = new Mascot();
mascot.play();
</script>
</body>
</html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





CIO
Sådan tager top-CIO Pernille Geneser livtag med 40 år gamle it-systemer i Stark Group med 10.000 medarbejdere