Avatar billede Slettet bruger
31. december 2007 - 00:05 Der er 9 kommentarer og
1 løsning

JavaScript i JavaScript

Hejsa

Hvad er den normal procedure hvis jeg gerne vil have lagt en onclick-kommando ind i et javascript - altså lidt som det her.
Jeg har her et script som sender noget indhold hen til et div-tag længere nede på siden - men den fejler hvis når jeg gør sådan her:
<script language="Javascript">
document.getElementById('div').innerHTML='<div onclick="window.open('http://www.google.com');">link</div>';
</script>

- men hvordan skal det så se ud for at virke?

\Dan
Avatar billede madeindk Nybegynder
31. december 2007 - 00:32 #1
<div id="testdiv" style="width:100px; height:30px; background-color:red; cursor:pointer;">&nbsp;</div>

<script type="text/javascript">
document.getElementById("testdiv").onclick = new Function("window.open('http://www.google.com');")
</script>

Sådan ngoet i den stil?
Avatar billede Slettet bruger
31. december 2007 - 00:46 #2
ja - men måske ikke helt alligevel...

Jeg vil gerne kunne lave en function som først og fremmest sender noget html ned i en div-tag længere nede på siden. Og denne div-tag kan sagtens indeholde onclick, onmouseover, onmouseout osv...
Og derfra skal der så kaldes en anden function...
- Så er der ikke en eller anden standard-metode?

\Dan
Avatar billede roenving Novice
31. december 2007 - 04:10 #3
Man bør altid tilføje events med DOM og kun til elementer, der allerede eksisterer i DOM-hierarkiet !-)

De standard-metoder, der findes, er absolut ikke implementeret ens i browserne og de ser meget forskelligt på sagen, så der skal virkeligt arbejdes, hvis events skal tilføjes:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AddEvent</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/812429">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>
<script type="text/javascript">
function addEvent(elm,evnt,func,addRem){
  if(elm.addEventListener && navigator.userAgent.toLowerCase().indexOf('opera')==-1){//Opera har et problem (min er 9.25 !-)
    if(addRem){
      elm.addEventListener(evnt,func,true);   
    }else{
      elm.removeEventListener(evnt,func,true);
    }
  }else if(elm.attachEvent){
    if(addRem)
      elm.attachEvent("on" + evnt, func);
    else
      elm.detachEvent("on" + evnt, func);
  }else if(addRem){
    elm["on"+evnt] = func;
  }else{
    elm["on"+evnt] = null;
  }
}
function minAlert(){
  alert('Funktion tilføjet');
}
</script>
</head>
<body>
<button name="button1" id="button1" onclick="addEvent(document.getElementById('minDiv'),'click',minAlert,true);return false">Tilføj event til div</button>
<button name="button2" id="button2" onclick="addEvent(document.getElementById('minDiv'),'click',minAlert,false);return false">Fjern event fra div</button>
<br><br>
<div id="minDiv">En div-tekst</div>
</body>

</html>
Avatar billede Slettet bruger
31. december 2007 - 06:21 #4
Hej roenving...

- Jeg tror vi taler lidt forbi hinanden...

Jeg har en side som indeholder en skjult iframe. Fra nu af vælger jeg at kalde min side for "side1" og min iframe for "side2" her i denne tråd - blot for at overskueliggøre det lidt...

På side1 har jeg en form som når man skriver noget i den submitter den formen ind i side2 så kommer side2 med et output (det er en søgemaskine) og dette output kunne se sådan her ud:
<script language="Javascript">
top.document.getElementById('div').innerHTML='<div onclick="top.document.location=('http://www.google.com');">link</div>';
</script>

på side1 har jeg så en div som har et id som hedder "div" og så skulle indeholdet jo gerne blive det som står i side2 - men det virker ikke på grund af den onclick...
- hvordan får man den til det?

\Dan
Avatar billede w13 Novice
31. december 2007 - 12:22 #5
Dannielsen>> Jeg tror ikke, Roenving har misforstået dig. Det er altid besværligt at sætte event handlers på elementer med javascript. Men hvorfor indsætter du ikke bare dette i stedet:

<a href="http://www.google.com" target="_top">link</a>

?

Og hvis det skal styles på en bestemt måde, kan du jo bare sætte en class på.
Avatar billede Slettet bruger
31. december 2007 - 15:21 #6
hej w13

"Men hvorfor indsætter du ikke bare dette i stedet:

<a href="http://www.google.com" target="_top">link</a>
"

- det gør jeg ikke fordi det er egentlig en function som skal køres når man klikker på den onclick...
- den function er allerede tilstede længere oppe i side1 det eneste det handler om er at den skal komme med det rigtige output i innerHTML...

\Dan
Avatar billede w13 Novice
01. januar 2008 - 17:36 #7
Tror faktisk, jeg ser fejlen nu.

I din kode:
<script language="Javascript">
document.getElementById('div').innerHTML='<div onclick="window.open('http://www.google.com');">link</div>';
</script>

bruger du ' til at omkranse koden, men inde i onclick'en bruger du også '. Så må de lige escapes:

<script language="Javascript">
document.getElementById('div').innerHTML='<div onclick="window.open(\'http://www.google.com\');">link</div>';
</script>
Avatar billede olebole Juniormester
02. januar 2008 - 15:29 #8
<ole>

- men roenving har stadig en rigtig god pointe med at bruge DOM. InnerHTML er gammel, invalid kode, der hører midthalvfemserne og NS4/IE4 til  ;o)

/mvh
</bole>
Avatar billede Slettet bruger
03. januar 2008 - 23:48 #9
tak for hjælpen allesammen!

- det endte med at jeg brugte w13's løsning... Så vil du ikke lige smide et svar w13?

\Dan
Avatar billede w13 Novice
04. januar 2008 - 17:01 #10
Svar kommer her.

Jeg kan dog kun gi' Olebole ret; innerHTML er ondt.
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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

IT-JOB

Netcompany A/S

Test Consultant

Capgemini Danmark A/S

IGNITE Graduate Program 2026

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Analytiker til Security Operations Center i Cyberdivisionen

AL Sydbank A/S (tidligere Arbejdernes Landsbank)

Tech Lead til Datacenter Operations