Keskustelu: Nettisivujen teko: Javascript, HTML ja heittomerkit

Tarkoitus olisi saada muuttujien avulla määritettyä kuvan sijainti sivulla, mutta en saa millään sitä toimimaan. Onkohan se kiinni noista heittomerkeistä, oon aika hukassa miten ne pitäisi tohon alla olevaan koodiin lykätä, jos joku osaa neuvoo ,niin kiitoksia.

var luku1=10;
var luku2=100;
document.write('<img style="position:absolute; TOP:'+ luku1 +'; LEFT:'+ luku2 + ';'" src='kuvat/apina.jpg'>');

'- merkeillä rajatussa merkkijonossa täytyy siihen sisältyvät ' -merkit vapauttaa \ -merkillä.. Eli

Merkkijono = 'Vaa\'an lukema'

Yleisesti ottaen elämää helpottaa, kun käyttää syntaksia värittävää editoria.

Kiitos! sain toimiin tolla:

document.write('<img style=\"position:absolute; TOP:'+ luku1 +'; LEFT:'+ luku2+';\" src=\"kuvat/apina.jpg\">');

Joo, tossa tapauksessa olisi riittänyt noi ' -> " muutoksetkin ja sen ylimääräisen ' poistaminen, mitkä teitkin. Mutta kyllä ton \-merkin voi laittaa " eteen vaikkei olisikaan pakko.

Hanki jokin tekstieditori, joka värittää koodista esimerkiksi tekstit eri värillä, ja muista lukea selaimen antamia virheilmoituksia.

Rivitetäänpä koodisi niin, että jokainen yhdistettävä pala ja +-merkki tulee omalle rivilleen:

'<img style="position:absolute; TOP:'
+
luku1
+
'; LEFT:'
+
luku2
+
';'
" src='kuvat/apina.jpg'>'

Kuten näet, luku2:n jälkeen tulee teksti ';', ja tämän jälkeen on jotain aivan kummallista, jossa on yksi "-merkki ja kolme '-merkkiä. Kummatkaan eivät siis mene edes tasan.

Kirjoita vaikka ensin haluttu HTML-lopputulos niin, että siinä on vain "-merkkejä (ei yhtään '-merkkiä). Ympäröi sitten HTML-koodi '-merkeillä.

'<img style="abc luku2 fed" src="ghi">'

Katkaise sitten teksti luku2:n molemmilta puolilta ja lisää plussat:

'<img style="abc     luku2     fed" src="ghi">'
                 ***       ***
'<img style="abc ' + luku2 + ' fed" src="ghi">'

Jos tämä tuntuu kovin hankalalta ja virheitä tulee jatkossakin, voit käyttää myös korvaustoimintoa:

'<img style="abc LUKU2_KORVAUS fed" src="ghi">'.replace("LUKU2_KORVAUS", luku2);