---
title: "javascript - byta färg på div"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/189746-javascript-byta-färg-på-div"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "ancii"
published: "2012-05-09T13:59:44.000Z"
updated: "2012-05-11T05:36:38.000Z"
replies: 5
views: 1068
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/189746-javascript-byta-färg-på-div"
---

# javascript - byta färg på div

## #1 — ancii, 2012-05-09T13:59Z

Hej WebForum!

Jag sitter med ett projekt där jag har ett registreringsformulär, det jag vill är att när man skriver in något eller inget i en \<input type="text"\> ska #div-blocket byta färg, antar att jag ska använda mig av "onblur" då jag inte vill att man ska behöva trycka på en knapp för att detta ska ske, sitter fast med själva skiftet av färgen, ett bra exempel är [Flashback](https://www.flashback.org/register/). 

Tack på förhand!

Permalänk: https://www.webforum.nu/p/189746

## #2 — Jojoxx, 2012-05-10T05:14Z

Hej, och välkommen till wF.

Om du bara vill kolla om fältet är tomt eller inte kan du göra så här.

```
<div id="div-blocket">
Namn <input type="text" name="namn" onblur="document.getElementById('div-blocket').style.backgroundColor=(this.value)?'green':'red';";>
</div>
```

Permalänk: https://www.webforum.nu/p/2298333

## #3 — ancii, 2012-05-10T11:06Z

> **[Jojoxx skrev:](https://www.webforum.nu/p/1550537)**
>
> Hej, och välkommen till wF.
> 
> Om du bara vill kolla om fältet är tomt eller inte kan du göra så här.
> 
>
>
> ```
> <div id="div-blocket">
> Namn <input type="text" name="namn" onblur="document.getElementById('div-blocket').style.backgroundColor=(this.value)?'green':'red';";>
> </div>
> ```

Tack!
Jo det är exakt så jag vill att den ska fungera men,skulle gärna vilja kolla om det tex är längre än 2 
\[if(username \< 2){
    style.backgroundColor='red'\]

eller kolla om emails är valida tex kolla om den innehåller '@' och '.' och att lösenorden stämmer överens.

Tack på förhand!

Permalänk: https://www.webforum.nu/p/2298349

## #4 — Jojoxx, 2012-05-10T11:59Z

Typ såhär:

```
<script>
String.prototype.isValidEmail = function(){
	return !!this.match(/^[a-zA-Z0-9]+([\.\-\_]{1}[a-zA-Z0-9]+)*\@[a-zA-Z0-9]+([\.\-\_]{1}[a-zA-Z0-9]+)*\.([a-zA-Z]{2,4})$/)
}
</script>

<form>
<div id="div-epost">
Epost <input type="text" name="epost" onblur="document.getElementById('div-epost').style.backgroundColor=(this.value.isValidEmail())?'green':'red';";>
</div>
<div id="div-namn">
Namn <input type="text" name="namn" onblur="document.getElementById('div-namn').style.backgroundColor=(this.value.length>2)?'green':'red';";>
</div>
<div id="div-pass">
Lösenord <input type="password" name="passwd1" onblur="document.getElementById('div-pass').style.backgroundColor=(this.value&&this.value==this.form.passwd2.value)?'green':'red';";><br />
Lösenord (igen) <input type="password" name="passwd2" onblur="document.getElementById('div-pass').style.backgroundColor=(this.value&&this.value==passwd1.value)?'green':'red';";>
</div>
</form>
```

Permalänk: https://www.webforum.nu/p/2298352

## #5 — ancii, 2012-05-10T15:01Z

> **[Jojoxx skrev:](https://www.webforum.nu/p/1550557)**
>
> Typ såhär:
> 
>
>
> ```
> <script>
> String.prototype.isValidEmail = function(){
> 	return !!this.match(/^[a-zA-Z0-9]+([\.\-\_]{1}[a-zA-Z0-9]+)*\@[a-zA-Z0-9]+([\.\-\_]{1}[a-zA-Z0-9]+)*\.([a-zA-Z]{2,4})$/)
> }
> </script>
> 
> <form>
> <div id="div-epost">
> Epost <input type="text" name="epost" onblur="document.getElementById('div-epost').style.backgroundColor=(this.value.isValidEmail())?'green':'red';";>
> </div>
> <div id="div-namn">
> Namn <input type="text" name="namn" onblur="document.getElementById('div-namn').style.backgroundColor=(this.value.length>2)?'green':'red';";>
> </div>
> <div id="div-pass">
> Lösenord <input type="password" name="passwd1" onblur="document.getElementById('div-pass').style.backgroundColor=(this.value&&this.value==this.form.passwd2.value)?'green':'red';";><br />
> Lösenord (igen) <input type="password" name="passwd2" onblur="document.getElementById('div-pass').style.backgroundColor=(this.value&&this.value==passwd1.value)?'green':'red';";>
> </div>
> </form>
> ```

Ja precis! Tack så jätte mycket för din tid och hjälp!!

Permalänk: https://www.webforum.nu/p/2298368

## #6 — Jojoxx, 2012-05-11T05:36Z

Så lite :) Glöm inte att markera lösningstråden.

Permalänk: https://www.webforum.nu/p/2298398

---

Tråden på webben: https://www.webforum.nu/amne/javascript/189746-javascript-byta-färg-på-div