Mijn if/else constructie werkt om de één of andere reden niet

[batch]

Hallo,

Ik ben bezig met een klein iets om tekst te manipuleren middels JavaScript. Maar mijn script werkt niet. Ik kan de fout(en) niet vinden.

Hier gaat het om: http://pastebin.com/Zbb1XhQu

Ik kan ook het HTML bestand wel posten.

Hopelijk kunnen jullie mij verder helpen.

Tom

 

[That Guy]

Oef. Dat's best een grote lijst met if/else! Hier wat losse tips:

variabelen altijd met var aanmaken.
"undefined" is niet echt netjes, je kan het beter zonder quotes doen. Of, wat netter is, met een logische OR.
Variabelen checken op existence is niet echt netjes.
Je variabele-scope is helemaal kaput...
document.write kan veel beter verwisseld worden met wat DOM-magie.
Waarom een parameter grootte in string-formaat? Integer is makkelijker. En beter. En maakt de code een stuk netter​

Maargoed, over je if-geval. Hier is een netter voorbeeld, dat een stuk logischer is. En netter. En korter, en makkelijker. :thumb:[JS]// deze moeten globaal neem ik aan?
var textkleur = '000000';
var textgrootte = 100;


// de vernieuwde magische functie
function verander(id, parameter)
{
var tag = document.getElementById(id);

if(parameter == textgrootte)
{
alert("De text heeft al de grootte " + parameter);
}else{
textgrootte = parameter;
tag.setAttribute('class', 'k' + textkleur + 'g' + textgrootte);
}
}

// btw, if/else moet geen ; achter het block. Dit is erg verwarrend, want het
// lijkt er zo op alsof je met een object bezig bent.[/JS]Anyway, mocht je alleen textgroottes willen toelaten die tussen de 100 en 500 zitten, doe dan zoiets:
[JS]function verander(id, parameter)
{
var tag = document.getElementById(id);

if(parameter == textgrootte)
{
alert("De text heeft al de grootte " + parameter);
}else{
switch(parameter)
{
case 100:
case 200:
case 300:
case 400:
case 500:
textgrootte = parameter;
tag.setAttribute('class', 'k' + textkleur + 'g' + textgrootte);
break;
default: /* als er iets anders is ingevuld */
alert('Alleen de groottes 100, 200, 300, 400 en 500 zijn toegestaan!');
break;
}
}
}[/JS]Je aanroep wordt dan wel zoiets:

<li><a onclick="verander('tekst',500);">500</a></li>

 

[batch]

Hallo,

Bedankt voor uw reactie!

Ik snap uw 2de voorbeeld niet, zo veel kan ik nog niet met JavaScript. En wat is het DOM? Volgens mij staat het voor Document Object Model ofzo, meer weet ik niet. (of voor Domme Overbodige Manier? )

Kunt u uw 2de voorbeeld mischien uitleggen?

 

[That Guy]

Ja, DOM is Document Object Model. Het is een 'uitbreiding' in Javascript zodat je elementen in je html kan aanroepen en veranderen. .getElementById() is een DOM functie, bijvoorbeeld.

Een switch() is een soort van lijst van if/else dingetjes. Bijvoorbeeld:[JS]var invoer = 'test';

switch(invoer)
{
case 'hallo':
alert('variabele invoer is "hallo"!');
break;

case 'test':
alert('variabele invoer is "test"!');
break;
}[/JS]Zoals je ziet is het een stuk duidelijker, omdat het er erg gestructureerd uitziet. Dit geld helemaal voor grote if/else loops.

Daarnaast is er het 'default'. Dit is eigenlijk de }else{ in een if-loop: als geen enkele van de case waardes matched met de switch, wordt default gebruikt.

Daarnaast kan je nog wat leuks doen: als je niet het break commando gebruikt, 'valt' je switch() door. Zo kan je dus voor verschillende invoeren dezelfde uitvoer krijgen. Zo is dit:[JS]var x = 5;

if(x == 5 || x == 6)
{
alert('5 of 6!');
}else if(x == 7)
{
alert('7!');
}[/JS]hetzelfde als dit:[JS]var x = 5;

switch(x)
{
case 5:
case 6:
alert('5 of 6!');
break;

case 7:
alert('7!');
break;
}[/JS]:thumb:

 

[batch]

Bedankt voor uw uitleg!

Maar mijn script ziet de variabele tekstgrootte niet. Waarom?

Ik had al even gegoogled en er zijn 2 soorten variabelen? Globale en lokale?
Volgens mij is globaal voor het hele bestand en lokaal alleen voor de functie waar de variabele in wordt gedefinieerd?

Ik heb nu dit (het werkt niet): http://pastebin.com/jeUYfaGS

 

[That Guy]

Ja, inderdaad. Globale en locale.

Globale variabelen zijn door iedereen en alles op de pagina te lezen en schrijven. Locale variabelen bestaan alleen op de huidige scope.

Over het algemeen is het een Slecht Idee om globale variabelen te hebben.



Over je code: je moet eventjes de HTML erbij geven, want de code werkt los wel gewoon hoor.

 

[batch]

Hier de hele inhoud van mijn html bestand: http://pastebin.com/EBaKeWHu

 

[That Guy]

Je gebruikt in de nieuwe functie nummers, niet stukjes text. Verander je HTML naar dit:

<!-- gebruik Numbers als 2e parameter -->

         <li><a href="#" onclick="verander('tekst',100)">100</a></li>
         <li><a href="#" onclick="verander('tekst',200)">200</a></li>
         <li><a href="#" onclick="verander('tekst',300)">300</a></li>
         <li><a href="#" onclick="verander('tekst',400)">400</a></li>
         <li><a href="#" onclick="verander('tekst',500)">500</a></li>

dan werkt t wel.

 

[batch]

Bedankt, het werkt nu!