Tryk på billede og den skriver et bogstav

Tags:    javascript

Hej

Jeg vil høre om der er nogle som kan hjælpe mig med en lille opgave ( nu skriver jeg lille, men jeg har faktisk igen idé om hvor stor eller småt det er)

Jeg har en side hvorpå der er nogle ikoner (billeder) når jeg klikker på et ikonet skal den i en tekstboks længere nede på siden skriv fx. A og på et andet ikon B osv.

den skal skrive bogstaverne efter hinanden og ikke slette dem efter hvert enkelt tryk.

Der skal også være en knap som hedder ryd, og ved tryk på denne skal hele tekstboksens indhold blive slettet

Håber der er nogle der forstår hvad jeg mener og som kan hjælpe mig :)

Hilsen Anders



Her er noget som du måske kan bygge videre på.. hvis det er.

Fold kodeboks ind/udKode 




TutoriaL
Step 1:Giv din tekst boks et id, dette gøres ved at give input tagget et id attribute med en værdi, det er her vigtigt at id'et ikke bruges af et andet element på siden.

<input type="text" id="target" value="">

Step 2: lav en function i et script tag på head elementet af siden
<script type="text/javascript">
function writer(text){
...
}
</script>
Hvis du allerede har et script tag skal kan du lægge funktionen i dette tag.

Step 3:lav functionens krop, functionen skal appended den text den får som parameter til elementet med id 'target'
function writer(text){
document.getElementById('target').value+=text;
}

document.getElementById('target') finder det første element på siden med id sat til 'target'
value+=text tager et inputs elements value værdi og lægger text til denne værdi og gemmer den i value.

Step 4: Sæt billeder til at skrive et bogstav til input elementet.
<img src="..." onclick="writer('a');"/>
når billede klikkes sendes 'a' til writer funktionen som så skriver den til input elementet value.

Step 5: Lav en function 'clear' til at rense input feltet.
function clear(text){
document.getElementById('target').value="";
}
denne funktion kan lægges i samme script tag som writer funktionen eller du kan lave endnu et script tag.

Step 6:Lav en knap der kalder denne function:
<button onclick="clear();">Clear</button>






Indlæg senest redigeret d. 31.08.2009 18:33 af Bruger #5620
Okay jeg har nu bygget videre på Peters kode. Nu ser den sådan ud:

Fold kodeboks ind/udJScript kode 


Men jeg har lige et enkelt spørgsmål, hvis nu jeg sætter et billede ind som jeg gerne vil have til at virker som et tryk på backspace, hvordan gør jeg så dette ??



så skal du bruge en string istedet, du kan alternativt også rode lidt med Nørden's kode, så skal det bare være et textfield istedet. Her er et færdigt eksempel med 3 knapper (uden billede det finder du nok selv).

Fold kodeboks ind/udKode 




Koden kan GIVET VIST nok optimeres lidt.... :D



t