Jump to content
Annons

Javascript/DOM-hjälp!

Micke H

Av Micke H
i Utanför ämnet

 Dela

Recommended Posts

Micke H

Micke H

Postat
Postat (redigerat)

Hallå!

Nån kunnig som kan hjälpa mig med en liten uppgift? 😆

Uppgiften är att när man trycker på en bild, ska en prompt komma upp, där man får frågan vad 2*7 är. Rätt svar ger en text i själva HTML-dokumentet som säger "Bravo!", fel svar ger "Försök igen!" Allt fungerar okej, utom en grej!

Texten som har skapats i HTML-dokumentet skall tas bort när man gör ett nytt försök, dvs klickar på bilden igen!

function Mattetal () {

if (pTag){

  bodyTag.removeChild(lastNode);

}

var bodyTag = document.getElementsByTagName("body")[0];

var pTag = document.createElement("p");

var Bravo = document.createTextNode("Bravo!");

var ForsokIgen = document.createTextNode("Försök igen!");

bodyTag.appendChild(pTag);

var tal = prompt("Vad blir:\n2*7?","Välj ett tal");

if (tal == 14){

  pTag.appendChild(Bravo);

}else{

  pTag.appendChild(ForsokIgen);

}

}

Det är alltså denna del som jag inte får att fungera!

if (pTag){

  bodyTag.removeChild(lastNode);

}

Denna del borde väl säga åt dokumentet att om pTag existerar, ta bort den?

Vad gör jag för fel? 😆

Redigerat av Lynxo
Link to comment
Dela på andra sajter
Annons
tsmalmbe (oregistrerad)

tsmalmbe (oregistrerad)

Postat
Postat

Det första jag kommer att tänka på är att du kanske inte kan ta bort en child, utan hellre måste sätta värdet till "" alltså tomt?

Link to comment
Dela på andra sajter
Micke H

Micke H

Postat
  • Trådstartare
Postat
Det första jag kommer att tänka på är att du kanske inte kan ta bort en child, utan hellre måste sätta värdet till "" alltså tomt?

Grejen är att i så fall, så staplas en massa P-taggar på varandra i dokumentet för varje gång man kör igenom upgiften, och det vill jag inte. Jag vill ersätta den gamla P-taggen med en ny P-tag! Och w3schools.com var inte till mycket hjälp...

Link to comment
Dela på andra sajter
tsmalmbe (oregistrerad)

tsmalmbe (oregistrerad)

Postat
Postat (redigerat)

Alltså grejen är att du skall ha en namngiven p-tag vars innehåll du ändrar. Du skall inte börja med att lägga till en tag, utan den skall finnas där från början. Endast peta på innehållet.

pseudokod: document.getElementById('ptaggensnamn').value = 'Foobar';

Redigerat av tsmalmbe
Link to comment
Dela på andra sajter
Micke H

Micke H

Postat
  • Trådstartare
Postat
Alltså grejen är att du skall ha en namngiven p-tag vars innehåll du ändrar. Du skall inte börja med att lägga till en tag, utan den skall finnas där från början. Endast peta på innehållet.

pseudokod: document.getElementById('ptaggensnamn').inehållspetningsfunktionen

Låt mig se om jag förstått det rätt. Om jag redan har en p-tagg i dokumentet, så måste jag ändra TextNodens värde (som finns i p-taggen), beroende på vad som händer?

Jag har dock lite svårt för att förstå exakt hur det skulle gå till... 😆

Link to comment
Dela på andra sajter
ChromaWoods

ChromaWoods

Postat
Postat 

var myText = "";
var bodyTag = document.getElementsByTagName("body")[0];
var pTag = document.createElement("p");
var textNode = "";

function Mattetal () {

if (myText != ""){
  pTag.removeChild(textNode)
}

var tal = prompt("Vad blir:\n2*7?","Välj ett tal");

if (tal == 14) myText = "Duktig idiot!";
else myText = "Du suger!";

textNode = document.createTextNode(myText);
bodyTag.appendChild(pTag);
pTag.appendChild(textNode);

}

Det du var ute efter var alltså pTag.removeChild(textNode) istället för bodyTag.removeChild(lastNode)

Link to comment
Dela på andra sajter
ChromaWoods

ChromaWoods

Postat
Postat (redigerat)
Men du, det funkar ju inte... 😆 När man skrivit ett svar, så skapas ingen text i dokumentet... 😆

Det gör det visst! Biatch! Då gör du nåt fel.... ok jag bifogar hela dokumentet i sin helhet. Spara hela min kod som whatever.html och öppna så får du se att det funkar.

<html>
<body>

<script language="JavaScript">

var myText = "";
var bodyTag = document.getElementsByTagName("body")[0];
var pTag = document.createElement("p");
var textNode = "";

function Mattetal () {

if (myText != ""){
  pTag.removeChild(textNode)
}

var tal = prompt("Vad blir:\n2*7?","Välj ett tal");

if (tal == 14) myText = "Duktig idiot!";
else myText = "Du suger!";

textNode = document.createTextNode(myText);
bodyTag.appendChild(pTag);
pTag.appendChild(textNode);

}

</script>

<input type="submit" onClick="Mattetal()" value="Din dumma jävel..">

</body>
</html>

Redigerat av ChromaWoods
Link to comment
Dela på andra sajter
Micke H

Micke H

Postat
  • Trådstartare
Postat (redigerat)

Fan, jag har gått igenom din kod, och jag tycker att allting verkar stämma...

Hehe, när jag kopierade allt och lade det i en html-fil, så fungerade det. Det är när jag använder en separat javascript-fil så fungerar det inte...

Redigerat av Lynxo
Link to comment
Dela på andra sajter
ChromaWoods

ChromaWoods

Postat
Postat
Fan, jag har gått igenom din kod, och jag tycker att allting verkar stämma...

Hehe, när jag kopierade allt och lade det i en html-fil, så fungerade det. Det är när jag använder en separat javascript-fil så fungerar det inte...

Gjorde du som jag sa? Spara hela min kod som ett separat html-dokument och testa.

Link to comment
Dela på andra sajter
Micke H

Micke H

Postat
  • Trådstartare
Postat
Fan, jag har gått igenom din kod, och jag tycker att allting verkar stämma...

Hehe, när jag kopierade allt och lade det i en html-fil, så fungerade det. Det är när jag använder en separat javascript-fil så fungerar det inte...

Gjorde du som jag sa? Spara hela min kod som ett separat html-dokument och testa.

Ja, då fungerar det. Men när jag lägger det i en separat javscript-fil och länkar i html-filen, så fungerar det inte...

Link to comment
Dela på andra sajter
ChromaWoods

ChromaWoods

Postat
Postat
Fan, jag har gått igenom din kod, och jag tycker att allting verkar stämma...

Hehe, när jag kopierade allt och lade det i en html-fil, så fungerade det. Det är när jag använder en separat javascript-fil så fungerar det inte...

Gjorde du som jag sa? Spara hela min kod som ett separat html-dokument och testa.

Ja, då fungerar det. Men när jag lägger det i en separat javscript-fil och länkar i html-filen, så fungerar det inte...

Plattfot! Murmeldjur! Pottsork! Gråsugga!

Få se hur den .js-filen ser ut.. Sitter du i plugget nu förresten? På Nackademin? Vem är din lärare i det du pysslar med nu? Kanhända att jag vet vem det är.

Link to comment
Dela på andra sajter
Micke H

Micke H

Postat
  • Trådstartare
Postat
Fan, jag har gått igenom din kod, och jag tycker att allting verkar stämma...

Hehe, när jag kopierade allt och lade det i en html-fil, så fungerade det. Det är när jag använder en separat javascript-fil så fungerar det inte...

Gjorde du som jag sa? Spara hela min kod som ett separat html-dokument och testa.

Ja, då fungerar det. Men när jag lägger det i en separat javscript-fil och länkar i html-filen, så fungerar det inte...

Plattfot! Murmeldjur! Pottsork! Gråsugga!

Få se hur den .js-filen ser ut.. Sitter du i plugget nu förresten? På Nackademin? Vem är din lärare i det du pysslar med nu? Kanhända att jag vet vem det är.

Jag gör extrauppgifter från gammal Javascriptkurs där vi hade en Ylva någonting...Egentligen ha vi Flash nu, men det skiter jag lite grand i... 😄

Anway, så här ser js-filen ut!

var myText = "";

var bodyTag = document.getElementsByTagName("body")[0];

var pTag = document.createElement("p");

var textNode = "";

function Mattetal () {

if (myText != ""){

  pTag.removeChild(textNode)

}

var tal = prompt("Vad blir:\n2*7?","Välj ett tal");

if (tal == 14) myText = "Duktig idiot!";

else myText = "Du suger!";

textNode = document.createTextNode(myText);

bodyTag.appendChild(pTag);

pTag.appendChild(textNode);

}

Och detta är HTML-filen:

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head>

<title>Slumptal</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="all">

@import "min_css.css";

</style>

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<img src="Abstrakt-is_liten.gif" onClick="Mattetal()">

</body>

</html>

Link to comment
Dela på andra sajter
ChromaWoods

ChromaWoods

Postat
Postat (redigerat)

Jag tror jag vet... eftersom du inkluderar js-filen i head-taggen så har inte body-taggen "skapats" än. Och eftersom deklarationerna i js-filen ligger utanför funktionen så kan du inte skapa element under body-taggen etfersom den inte har parsats än. Dina variabler i js-filen har alltså ingen jävla aning om vad bodytaggen är för nåt, för den finns inte i det skedet.

Redigerat av ChromaWoods
Link to comment
Dela på andra sajter
Micke H

Micke H

Postat
  • Trådstartare
Postat
Jag tror jag vet... eftersom du inkluderar js-filen i head-taggen så har inte body-taggen "skapats" än. Och eftersom deklarationerna i js-filen ligger utanför funktionen så kan du inte skapa element under body-taggen etfersom den inte har parsats än. Dina variabler i js-filen har alltså ingen jävla aning om vad bodytaggen är för nåt, för den finns inte i det skedet.

Jag testade att lägga variablerna i början efter if-taggen, men i så fall så ersätts inte Textnoden med det nya värdet. Och att lägga variablerna i en ny funktion och köra en window.onload på dom fungerade inte heller... 😄

Link to comment
Dela på andra sajter
ChromaWoods

ChromaWoods

Postat
Postat (redigerat)
Jag tror jag vet... eftersom du inkluderar js-filen i head-taggen så har inte body-taggen "skapats" än. Och eftersom deklarationerna i js-filen ligger utanför funktionen så kan du inte skapa element under body-taggen etfersom den inte har parsats än. Dina variabler i js-filen har alltså ingen jävla aning om vad bodytaggen är för nåt, för den finns inte i det skedet.

Jag testade att lägga variablerna i början efter if-taggen, men i så fall så ersätts inte Textnoden med det nya värdet. Och att lägga variablerna i en ny funktion och köra en window.onload på dom fungerade inte heller... 😄

Nej jag vet. Det funkar inte eftersom du bara vill skapa pTag-noden EN gång. Lägger du dem i funktionen så skapas det en nod varje gång.

Läs in scriptfilen EFTER bodytaggen i html-dokumentet:

<body>

<script type="text/javascript" src="script.js"></script>
<img src="Abstrakt-is_liten.gif" onClick="Mattetal()">



</body>

Så funkar det.

EDIT: Och ge fan i js-scriptet.

Redigerat av ChromaWoods
Link to comment
Dela på andra sajter

Bli medlem (kostnadsfritt) eller logga in för att kommentera

Du behöver vara medlem för att delta i communityn

Bli medlem (kostnadsfritt)

Bli medlem kostnadsfritt i vår community genom att registrera dig. Det är enkelt och kostar inget!

Bli medlem nu (kostnadsfritt)

Logga in

Har du redan en inloggning?
Logga in här.

Logga in nu
 Dela
Gå till ämneslista
×
×
  • Skapa ny...