javascript reagerd niet als geplaned.

[Ikoster]

heey,
ik had een scriptje met een interactief veldje voor html.
nu wilde ik er nog een veld aan toevoegen(flag),
maar het resultaat komt SAMEN met de vorige inhoud in het veld te staan terwijl de tekst dat niet doet zit er een fout in?

bedankt voor het kijken!:thumb:

<div id="frame">
<strong>welkom</strong><br />
</div>
<div id="flag">
<a><img src="bestanden/nl_40x40.png" onclick="changeTitle('nl')" alt="Nederlands" style="margin-right: 0px;" /></a>
<a><img src="bestanden/gb_30x30.png" onclick="changeTitle('gb')" alt="English" style="margin-right: 0px;" /></a>
<a><img src="bestanden/de_30x30.png" onclick="changeTitle('de')" alt="German" style="margin-right: 0px;" /></a>
<a><img src="bestanden/fr_30x30.png" onclick="changeTitle('fr')" alt="France" style="margin-right: 0px;" /></a>
</div>

[JS]
function changeTitle(taal)
{
var text = '';
var afbl = '';
switch(taal)
{
case 'nl':
text = '<strong>welkom</strong><br />';
afbl = '<a><img src="bestanden/nl_40x40.png" onclick="changeTitle('+"'nl'"+')" alt="Nederlands" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/gb_30x30.png" onclick="changeTitle('+"'gb'"+')" alt="English" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/de_30x30.png" onclick="changeTitle('+"'de'"+')" alt="German" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/fr_30x30.png" onclick="changeTitle('+"'fr'"+')" alt="France" style="margin-right: 0px;" /></a>';
break;
case 'gb':
text = '<strong>welcome</strong><br />'
';
afbl ='<a><img src="bestanden/nl_30x30.png" onclick="changeTitle('+"'nl'"+')" alt="Nederlands" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/gb_40x40.png" onclick="changeTitle('+"'gb'"+')" alt="English" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/de_30x30.png" onclick="changeTitle('+"'de'"+')" alt="German" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/fr_30x30.png" onclick="changeTitle('+"'fr'"+')" alt="France" style="margin-right: 0px;" /></a>';
break;
case 'de':
text = '<strong>guten tag</strong><br />';
afbl = '<a><img src="bestanden/nl_30x30.png" onclick="changeTitle('+"'nl'"+')" alt="Nederlands" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/gb_30x30.png" onclick="changeTitle('+"'gb'"+')" alt="English" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/de_40x40.png" onclick="changeTitle('+"'de'"+')" alt="German" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/fr_30x30.png" onclick="changeTitle('+"'fr'"+')" alt="France" style="margin-right: 0px;" /></a>';
break;
case 'fr':
text = '<strong>bonjour</strong><br />';
afbl = '<a><img src="bestanden/nl_30x30.png" onclick="changeTitle('+"'nl'"+')" alt="Nederlands" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/gb_30x30.png" onclick="changeTitle('+"'gb'"+')" alt="English" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/de_30x30.png" onclick="changeTitle('+"'de'"+')" alt="German" style="margin-right: 0px;" /></a>'+
'<a><img src="bestanden/fr_40x40.png" onclick="changeTitle('+"'fr'"+')" alt="France" style="margin-right: 0px;" /></a>';

break;
}
var flag = document.getElementById('flag');
flag.innerHTML = afbl;
var frame = document.getElementById('frame');
frame.innerHTML = text;
}

[/JS]

 

[That Guy]

Eh, 2 dingetjes. De eerste is dat je een quote verkeerd hebt; zie regel 16. De tweede is dat je het verkeerd aanpakt.

Je gaat nu STEEDS opnieuw HTML genereren met Javascript. Dat's wat men een 'bad practice' noemt - een Slecht Idee Met Een Reden.
Als je nu in plaats van steeds opnieuw alle linkjes maakt, gewoon alleen de text veranderd, en het plaatje, in plaats van de hele HTML?

/* CSS */
#flag img
{
   margin-right: 0;
}

<div>
   <strong id='welkom-text'>welkom</strong>
</div>

<div>
   <a><img id='lang-nl' src="bestanden/nl_40x40.png" onclick="changeTitle('nl', this)" alt="Nederlands" /></a>
   <a><img src="bestanden/gb_30x30.png" onclick="changeTitle('gb', this)" alt="English" /></a>
   <a><img src="bestanden/de_30x30.png" onclick="changeTitle('de', this)" alt="German" /></a>
   <a><img src="bestanden/fr_30x30.png" onclick="changeTitle('fr', this)" alt="France" /></a>
</div>

[js]var lastBigFlag = [document.getElementById('lang-nl'), 'nl']; // array: [element-handle, taal]


function changeTitle(lang, imgElem)
{
var welkom = document.getElementById('welkom-text');


// maak oude plaatje kleiner
lastBigFlag[0].setAttribute('src', 'bestanden/' + lastBigFlag[1] + '_30x30.png');

// maak nieuwe plaatje groter
imgElem.setAttribute('src', 'bestanden/' + lang + '_40x40.png');

// zet nieuwe plaatje als 'laatste'
lastBigFlag = [imgElem, lang];


switch(lang)
{
case 'nl': welkom.innerHTML = 'welkom'; break;
case 'de': welkom.innerHTML = 'guten tag'; break;
case 'fr': welkom.innerHTML = 'bonjour'; break;
case 'gb': welkom.innerHTML = 'welcome'; break;
}
}[/js]Okay, hier is het idee:

Eerst, vind de 'standaard' taal, want we moeten ten alle tijden weten welke vlag we als laatste hadden. In dit geval is de 'default' NL, en om deze te vinden moeten we het eventjes een ID geven (noot: de rest van de vlaggen dus niet). Dan, als iemand het wisselt, maak je eerst de oude vlag klein, dan de nieuwe vlag groot, en dan update je de referenties.

 

[Ikoster]

heey,
bedankt voor de tijd en moeite wat je zegt klopt helemaal en is weer een beetje achterhaalt ik heb het inmiddels opgelost met ajax. tanks ian:thumb: