JavaScript, mit rontottam el? (Több lent)
Hella,
A kódnak elvileg a felső 3 gomb egyikére nyomva ki kéne cserélnie 2 képet, és a form színét, de nem igazán megy.
Mi az oka? (igen, rá google-ztam)
=======
<!DOCTYPE html>
<html>
<head>
<title>JS Cuccos / 11C</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background: url('http://wallpapers-and-backgrounds.net/wp-content/uploads/2015/10/white-abstract-background_1.jpg');
width: 100%;
height: 100;
left: 1;
top: 1;
margin: 60px auto;
text-align: center;
font-family: 'Josefin Sans', sans-serif;
font-size: 18pt;
color: #6bc2ea;
}
input{
border: 1px solid #a8a8a8;
color: #6bc2ea;
border-radius: 40px;
font-size: 30px;
font-family: 'Josefin Sans', sans-serif;
padding: 10px;
background: transparent;
text-align: center;
width: 400px;
}
#gomb{
background-color: transparent;
color: #6bc2ea;
width: 420px;
}
#lila{
height: 50px;
width: 50px;
border-radius: 30px;
background-color: purple;
border: 3px solid #aaa;
margin: 0 10px 45px 0;
}
#kek{
height: 50px;
width: 50px;
border-radius: 30px;
background-color: #6bc2ea;
border: 3px solid #aaa;
margin: 0 10px 45px 0;
}
#zud{
height: 50px;
width: 50px;
border-radius: 30px;
background-color: #7cc576;
border: 3px solid #aaa;
margin: 0 10px 45px 0;
}
button{
margin: 0 5px 5px 5px;
}
</style>
<script>
alert('A felső képre kattintás frissíti az oldalt!');
function Zsaftar(){
var form = document.getElementById('cucc');
for (var i = 0; i < form.length-1; i++) {
var jell = szamvn(Number(form[i].value)) ? " - nem szám" : " - szám";
if(form[i].type.toLowerCase() == 'text'){
Printelj(form[i].value+" "+jell);
}
}
}
function Printelj(ize){
var doboz = document.getElementById('cella');
doboz.innerHTML += ize+"<br>";
}
function szamvn(adat){
return typeof adat === 'number' && +isNaN(adat);
}
function ToLila(){
document.getElementsByTagName("input").style.color = "purple";
document.getElementById('felso').src='http://i.imgur.com/hel8Bwr.png';
document.getElementById('also').src='http://kephost.com/images/2016/12/30/szuperadmin.gif';
}
function ToKek(){
document.getElementsByTagName("input").style.color = "#6bc2ea";
document.getElementById('felso').src='http://i.imgur.com/YL4nwxg.png';
document.getElementById('also').src='http://kephost.com/images/2016/12/30/foadmin.gif';
}
function ToZud(){
document.getElementsByTagName("input").style.color = "#7cc576";
document.getElementById('felso').src='http://i.imgur.com/5z4KRnj.png';
document.getElementById('also').src='http://kephost.com/images/2016/12/30/admin.gif';
}
</script>
</head>
<body>
<input type="button" id="lila" onclick="ToLila();">
<input type="button" id="kek" onclick="ToKek();">
<input type="button" id="zud" onclick="ToZud();">
<br>
<img id="felso" src="http://i.imgur.com/YL4nwxg.png" onclick="location.reload();"><br>
<br>
<form id="cucc">
<input type="text" name="nev" placeholder="Név"><br>
<br><input type="text" name="ital" placeholder="Kedvenc Pia"><br>
<br><input type="text" name="kor" placeholder="Életkor"><br>
<br><input type="button" value="Eriggyé'" onclick="Zsaftar();" id="gomb">
</form>
<br>
<img id="also" src="http://kephost.com/images/2016/12/30/foadmin.gif">
<br>
<div id="cella">
</div>
</body>
</html>
=======
Előre is köszi.
válasza:A document.getElementsByTagName("input") egy listát ad vissza az input típusú elemekről, ennek a listának pedig nincs style.color propertyje. Szóval ez:
document.getElementsByTagName("input").style.color = "#6bc2ea";
sosem fog működni.
Egyébként javaslom, ismerkedj meg a böngésződ developer tools nevű eszközével. Általában F12-vel, vagy Ctrl+Shift+I-vel indítható. Ezzel kb. 3 másodperc megtalálni a hibát.
válasza: válasza:Már nem aktuális, de tömbként hivatkozhatsz jól a színezésre:
...
document.getElementsByTagName("input")[3].style.color = "purple";
document.getElementsByTagName("input")[4].style.color = "purple";
document.getElementsByTagName("input")[5].style.color = "purple";
...
(0-1-2 felül a színváltó nyomógombok)
válasza: válasza:ha konzol nem írja, c9.io talán akkor is jelzi,
egyébként pedig írj mindenhova egy console.log(consolszám++)és nézd meg mi az utolsó ami lefutott
pl:
var szam = 0;
tolila:
válasza:bocs megnyomtam a gombot de:
tolila:
log(szam++)
//tolila
topiros:
log(szam++)
//topiros
tolila()
topiros()
és konzol legutolsó logjának nézd meg a sorát, és hogy mi hívta meg
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!