Frontend Development

Stupid JS problem (still learning this)

Submitted by AAA, , Thread ID: 21709

Thread Closed

RE: Stupid JS problem (still learning this)

This post was last modified: 20-04-2018, 04:21 PM by TransparentSecret
#9
10-06-2016, 09:33 PM
AAA Wrote:
So I have this stupid javascript problem, and I need some help!


Code:
<!DOCTYPE html>
<html>
<head>
<title>mahh...</title>
<meta charset="UTF-8">
<style> #p {font-size:30px;} </style>
</head>

<body>

<p>Choose your favorite color:</p>

<form>
<select id="select" onchange="foo()">
<option>Colors</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="green">GEEEN</option>

</select>
</form>


<p id="p"></p>

<script>
function foo() {
  var color = document.getElementById("select").value;
  document.getElementById("p").innerHTML = "Your favorite color is: " + color;
}

</script>

</body>
</html>

How to have body background same as selected color ?

E.g. If you select the red color, body background should be red...


Fucking DOM!


The vanilla JS response posted will work.

But, why don't you just use jQuery? You would remove the 'onchange' attribute, then it would be this:

Code:
$(document).ready(function() {
  $('#select').change(function() {
   $('body').css('background-color', $(this).val());
  });
});

Users browsing this thread: 3 Guest(s)