Tuntuu olevan vaikeaa tämä jascriptin opettelu. Olen jo pariviikkoa yrittänyt saada div:n taustaväriä vaihdettua huonoin tuloksin. Googlettamalla olen löytänyt sivuja joissa on näytetty miten tuo tehdään. Ei onnistu, ei! No ajattelin että kopsaan koko esimerkin yhdeltä sivulta ja kokeilen sitä, ei onnistu. Missä minulla menee pieleen koko homma?
Tässä esimerkkikoodi jonka netistä poimin:
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.backgroundcolor='black';
}
function mouseout()
{
document.getElementById("thediv").style.backgroundcolor='red';
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div style="width:200px; height:200px; border:solid thin black" id=thediv onmouseover="mouseover()" onmouseout="mouseout()">
</div>
</BODY>
</HTML>Eikös tuo ohjelma pitäisi vaihtaa väriä kun hiiren vie divin päälle ja pois? Minulla ei toimi. Jos laitan funktioon document.bgcolor."väri" niin se toimii.
Seuraavilla muutoksilla lähti toimimaan.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function mouseover() {
document.getElementById("thediv").style.backgroundColor='black';
}
function mouseout() {
document.getElementById("thediv").style.backgroundColor='red';
}
</script>
</head>
<body>
<div style="width:200px; height:200px; border:solid thin black" id="thediv" onmouseover="mouseover()" onmouseout="mouseout()"></div>
</body>
</html>Hienoa! Nyt toimii omakin versio divin taustavärinvaihdosta. Kiiiitos!
Näköjään netistä ei aina löydy täyttä totuutta.
novari kirjoitti:
Näköjään netistä ei aina löydy täyttä totuutta.
Hienoa kun oivalsit asian. =)
Älkää sitten suotta käyttäkö tuollaiseen JavaScriptiä tuotantoversioissa. Perustyylit on tarkoitus ja kätevämpääkin toteuttaa CSS:llä. Tällöin ne myös toimivat ilman JavaScript-tukea. Itse usein teen niin, että laitan CSS:ään valmiit tyylit ja JS:llä vain päivitän class- ja id-attribuutteja.
Itselläni on CSS:llä tehdyt tyylit mutta kun yritän tehdä sillai että käyttäjä voi vaihtaa tausta- ja kirjoitusväriä div:ssä. Kyseessä on kortintekoohjelma, onnittelu- joulu- pääsiäis- ym. korttien tekoa kotisivuilla.
Siitä pääsenkin toiseen kysymykseen, miten saan div:stä kirjoitetun tekstin talletettua? Javascriptillä tuo varmaankin tehdään mutta kun olen vielä aloitteleva tällä kielellä niin ei ainakaan heti tule mieleen millä tuon toteuttaisin.
Kannattaa myös tutustua tapahtumankuuntelijoihin, joiden avulla saavutetaan mm. selkeämpi rakennemerkkaus (HTML-koodi). En ole aivan varma, mitä nyt haet kysymyksellä: haluatko diviin kirjoitetun tekstin (textContent-ominaisuus), tai kenties divin koko sisällön (innerHTML)? Haluatko tallentaa nämä käyttäjän koneelle (localStorage-objekti tai keksit) vai palvelimelle (joudut käyttämään jotakin palvelinpuolen ohjelmointikieltä, kuten vaikkapa PHP tai Python). Firebug, IE Developer Tools ja Opera Dragonfly ovat oivia työkaluja elementtien ominaisuuksien tutkailemiseen.
Minulla on näköjään pallo hukassa. Olen tehnyt suurimman osan kotisivuista php:lla. Tarkoitus olisi että käyttäjä voisi kirjoittaa tekstiä div:iin josta se sitten talletetaan palvelimelle. Taitaa olla utopiaa kun meinasin tehdä sillai että kortti näyttää tekovaiheessa samalta kuin valmiina. Jos käytän textareaa niin valmis tuotos ei ole samanlainen. Tiedonpuute "tyssäsi" siihen miten divi:iin kirjoitetaan ja miten kirjoitus talletetaan?
Olen selannut nettiä mutta en osaa tietenkään hakea oikeilla hakusanoilla oikeaa tietoa.
Kyllä sen pitäisi samanlaiselta näyttää, jos css-tyyli on identtinen divin kanssa. Se pitää kyllä manuaalisesti sille textarealle tehdä.
Muuten kyllä mutta kun taustan ja kirjoitusvärin vaihto ei onnistu textarealla.
novari kirjoitti:
Muuten kyllä mutta kun taustan ja kirjoitusvärin vaihto ei onnistu textarealla.
Onnistuu, ei mitään ongelmaa. Onnistuu jopa IE:lla, kunhan ensin vääntää IE:lle kelpaavaa javascriptiä toisen mokoman normi-js:n päälle. Siltikin lomake-elementtien kanssa törmää kaikenlaisiin ihmeellisyyksiin IE:n kanssa.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function load() {
// select-elementille change-listener EI-tyyliin
bgSelectEle = document.getElementById('bgColor');
bgSelectEle.attachEvent("onchange", function(evt) {
// selvitetään valittu option EI-tyyliin
selectEle = document.getElementById('bgColor');
colorName = selectEle.options[selectEle.selectedIndex].value;
// vaihdetaan väri
document.getElementById('mybox').style.backgroundColor = colorName;
});
}
</script>
<style type="text/css">
#mybox {
width:200px; height:200px; border:solid thin black;
overflow: hidden; /* IE ei vissiin piilota scrolbaria muuten? */
}
.pink { background-color: pink; color: black; }
.black { color: pink; background-color: black; }
</style>
</head>
<body onload="load()">
<form>
<fieldset id="mybox_wrapper">
<textarea id="mybox" class="pink">DADADA</textarea>
</fieldset>
<fieldset><legend>Värit</legend>
<label>Tausta:
<select id="bgColor">
<option>pink</option>
<option>silver</option>
</select>
</label>
</fieldset>
</form>
</body>
</html>IE9:ssä toimii sama addEventListener.
Vaikka en saannut esimerkkiä toimimaan niin paljon uutta asiaa tuli opeteltavaksi.
Kiitos LaNu!
Viittiskö joku katsoa mikä vika tuossa LaNu:n esimerkkikoodissa on kun se ei toimi. Itse vasta opettelen JS joten en löydä vikaa. Toimivalla esimerkillä oppii paljon helpommin.
LaNun koodi on suunnattu IElle, joten se ei toimi muissa selaimissa. Tässä versio, joka toimii ainakin Firefoxissa (ja miksei myös muissa):
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function load() {
// select-elementille change-listener IE-tyyliin
// -Asetetaan listener muiden selainten tavalla
bgSelectEle = document.getElementById('bgColor');
// bgSelectEle.attachEvent("onchange", function(evt) {
bgSelectEle.addEventListener("change", function() {
// selvitetään valittu option IE-tyyliin
// -Miten eroo muista?
selectEle = document.getElementById('bgColor');
colorName = selectEle.options[selectEle.selectedIndex].value;
// vaihdetaan väri
document.getElementById('mybox').style.backgroundColor = colorName;
}, false); // -Loppuun vielä false
}
</script>
<style type="text/css">
#mybox {
width:200px; height:200px; border:solid thin black;
overflow: hidden; /* IE ei vissiin piilota scrolbaria muuten? */
}
.pink { background-color: pink; color: black; }
.black { color: pink; background-color: black; }
</style>
</head>
<body onload="load()">
<form>
<fieldset id="mybox_wrapper">
<textarea id="mybox" class="pink">DADADA</textarea>
</fieldset>
<fieldset><legend>Värit</legend>
<label>Tausta:
<select id="bgColor">
<option>pink</option>
<option>silver</option>
</select>
</label>
</fieldset>
</form>
</body>
</html>Tämä voi auttaa selainten erojen ratkaisemisessa.
Olisi suotavaa tehdä muuttujista (bgSelectEle, selectEle, colorName) var-sanalla paikallisia, vaikkei tuosta tällä kertaa aiheudukaan ongelmia.
novari kirjoitti:
Itse vasta opettelen JS joten en löydä vikaa.
Aika huono tekosyy. Voisit ottaa seuraavaksi oppimistavoitteeksesi selaimen virhekonsolin avaamisen. Sinne tulee selvä ilmoitus tuonkin koodin ongelmasta. Ilmoituksessa näkyy yleensä tiedosto, rivinumero ja virheen laji. Esimerkiksi Chromiumin konsolissa ilmoitus näyttää suunnilleen tältä:
koe.html:11: Uncaught TypeError: Object #<HTMLSelectElement> has no method 'attachEvent'
Chromiumissa ja muistaakseni Operassa on valmiiksi laadukas konsoli. Firefoxiin kannatta asentaa Firebug.
Hennkka kirjoitti:
LaNun koodi on suunnattu IElle
Siis IE < 9.
Mukailevat esimerkit:
Koodissa kommentit. Alla "natiivi"-JS -esimerkki.
// Run when DOM tree is ready
window.addEventListener('DOMContentLoaded', function(e) {
// Fetch first HTMLSelectElement in the DOM tree
var select = document.getElementsByTagName('select')[0],
// Fetch first HTMLTextAreaElement in the DOM tree that has class 'pink'
myBox = document.getElementsByClassName('pink')[0];
// Bind 'change' event listener to the HTMLSelectElement
// Ie. given function is run each time when select element's selection changes
select.addEventListener('change', function(e) {
// Set the text area's class to whatever was selected from the dropdown
myBox.className = this.options[this.selectedIndex].value;
}, false);
}, false);EDIT:
Chromessa on Developer Tools, Firefoxille on Firebug-lisäosa, Internet Explorer 9:ssä on Developer Toolbar, Operassa Opera Dragonfly, Safarissa Developer Debug Console. Firebugin saa toimimaan myös muissa selaimissa lite-versiona.
Aihe on jo aika vanha, joten et voi enää vastata siihen.