[JS] Ernaast klikken

Door Harmen op 18-05-2006 20:21

1.539 views

Hooi,
Ik heb een scriptje van een site en als je dan op wat text double-clickt de div een textbox word. Maar hoe zorg ik er nou voor dat als je naast de textbox klikt, de textbox weer een divje word?

Script:


<? //Dit alleen voor het kleurtje :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Switchende dinges</title>

<script language="javascript" type="text/javascript">
text = new Array(); //This array will hold variables to tell the script the state that it should switch to

function switchState(id)
{
        content = ''; //Nullify the content variable
        if( text[id] != 1 ) //Check if text['id'] is set to 1 (explained later)
        {
                content = document.getElementById('child' + id).innerHTML; //Define content as the inner content of the div
                new_html = '<input type="text" id="child' + id + '" value="' + content + '" />'; //Define the new HTML (textbox)
                document.getElementById('parent' + id).innerHTML = new_html; //Set the parent div's HTML to the new HTML
                text[id] = 1; //We set this variable for the script to remember that we already set it to a text box
        }
        else
        {
                //So with this case we will be doing the opposite and switching back to a div
                content = document.getElementById('child' + id).value; //Define content as the value of the textbox
                new_html = '<div id="child' + id + '">' + content + '</div>'; //Define the new HTML (div)
                document.getElementById('parent' + id).innerHTML = new_html; //Set the parent div's HTML to the new HTML
                text[id] = 0; //We set this variable for the script to remember that we have set it back to a div
        }
}
</script>
</head>

<body>

<div id="parent1" ondblclick="javascript:switchState(1)">
  <div id="child1">Some text</div>
</div>

<div id="parent2" ondblclick="javascript:switchState(2)">
  <div id="child2">Some more text</div>
</div>

</body>
</html>
?>//Afsluiten van het kleurtje

Iemand een idee?
Ik hoop dat jullie nog steeds weten dat ik nr 1 noob ben in JS

M Ypma

18-05-2006 20:26

misschien...indien je gebruik maakt van een groot container div... je daar in de onClick je terug switch functie zet?
ik weet het niet zeker, ik denk alleen mee:)

Harmen

18-05-2006 20:30

@Michel
Heej, ja, wel goed idee! Ff wat prutsen :)
Ipv een div om alles heen kan ik toch ook gewoon de body gebruiken neem ik aan??

Als er verder nog ideejen opdoemen dan moeten jullie het maar zeggen

Harmen :)

M Ypma

18-05-2006 20:36

het lijkt me sterk dat je in de body tag een onclick kan gebruiken, maar je kan alles proberen, het kost tenslotte niks! succes en laat weten hoe het afloopt!:D

Jelmer -

18-05-2006 21:54

Misschien met een onblur-event op de textarea...

Harmen

19-05-2006 14:36

Thx Jelmer !! (Sorry dat ik nu pas weer kijk) :)

gefeliciteerd met je 4000 posts

- wes -

19-05-2006 14:59

3999 posts

pfft, amateur :)

Harmen

19-05-2006 16:38

[Ga jij tog yoghurtemmers leeg drinken]

onBlur werkt alleen maar in IE4.0+ niet in Mozilla :S

Harmen

19-05-2006 17:18

ik ben idd een amateur in JS, hoe moet het er dan uitzien als je er naast klikt dat het alleen maar een div kan worden???
(Moet maar ergens een cursus JS gaan volgen zeg :S)

Harmen

20-05-2006 10:33

bump..?

Harmen

20-05-2006 11:25

Dan maar m'n 4e berichtje :S (sorry)
Ik heb er nu dit van gemaakt:

Script


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Switchende dinges</title>

<script language="javascript" type="text/javascript">
function anders() {
    content = document.getElementById('child1').value; //Define content as the value of the textbox
    new_html = '<div id="child1">' + content + '</div>'; //Define the new HTML (div)
    document.getElementById('parent1').innerHTML = new_html; //Set the parent div's HTML to the new HTML
}


text = new Array(); //This array will hold variables to tell the script the state that it should switch to

function switchState(id)
{
        content = ''; //Nullify the content variable
        if( text[id] != 1 ) //Check if text['id'] is set to 1 (explained later)
        {
                content = document.getElementById('child' + id).innerHTML; //Define content as the inner content of the div
                new_html = '<input type="text" id="child' + id + '" value="' + content + '" onBlur=anders() />'; //Define the new HTML (textbox)
                document.getElementById('parent' + id).innerHTML = new_html; //Set the parent div's HTML to the new HTML
                text[id] = 1; //We set this variable for the script to remember that we already set it to a text box
        }
        else
        {
                //So with this case we will be doing the opposite and switching back to a div
                content = document.getElementById('child' + id).value; //Define content as the value of the textbox
                new_html = '<div id="child' + id + '">' + content + '</div>'; //Define the new HTML (div)
                document.getElementById('parent' + id).innerHTML = new_html; //Set the parent div's HTML to the new HTML
                text[id] = 0; //We set this variable for the script to remember that we have set it back to a div
        }
}
</script>
</head>

<body>
<div>
<div id="parent1" ondblclick="javascript:switchState(1)">
  <div id="child1">Some text</div>
</div>
</div>

</body>
</html>

Werkt nog steeds niet

Reageren

Inloggen om te reageren