Frontend Development

Stupid JS problem (still learning this)

Submitted by AAA, , Thread ID: 21709

Thread Closed
10-06-2016, 09:33 PM
#1
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!
[Image: XhhKTdF.png]
1

RE: Stupid JS problem (still learning this)

#2
function foo() {
var colors = ["white", "red", "blue", "green"];
var color = document.getElementById("select").value;
var selection = document.getElementById("select").selectedIndex;
document.getElementById("p").innerHTML = "Your favorite color is: " + color;
document.body.style.background = colors[selection];
}

//This should work
Do notdispatchsuperfluousmemos to me
Contactme only ifyou are faced withgenuine conflictor ifyou are opposed to speaking with another
Act with forethoughtpriorto speakingor acting as I am not fond offorgiveness

RE: Stupid JS problem (still learning this)

OP
#3
10-06-2016, 10:59 PM
Jackz Wrote:
function foo() {
var colors = ["white", "red", "blue", "green"];
var color = document.getElementById("select").value;
var selection = document.getElementById("select").selectedIndex;
document.getElementById("p").innerHTML = "Your favorite color is: " + color;
document.body.style.background = colors[selection];
}

//This should work

Thank you so much, Mr. Robot ;D
[Image: XhhKTdF.png]

RE: Stupid JS problem (still learning this)

#4
10-06-2016, 11:13 PM
AAA Wrote:
10-06-2016, 10:59 PM
Jackz Wrote:
function foo() {
var colors = ["white", "red", "blue", "green"];
var color = document.getElementById("select").value;
var selection = document.getElementById("select").selectedIndex;
document.getElementById("p").innerHTML = "Your favorite color is: " + color;
document.body.style.background = colors[selection];
}

//This should work

Thank you so much, Mr. Robot ;D

No problem
Do notdispatchsuperfluousmemos to me
Contactme only ifyou are faced withgenuine conflictor ifyou are opposed to speaking with another
Act with forethoughtpriorto speakingor acting as I am not fond offorgiveness

RE: Stupid JS problem (still learning this)

#5
Wow !!! Can you provide a tutorial on this??

RE: Stupid JS problem (still learning this)

#6
15-03-2017, 03:28 PM
raspucay Wrote:
Wow !!! Can you provide a tutorial on this??

Are you bloody serious? it's a couple lines of actual code..

RE: Stupid JS problem (still learning this)

#7
You can use a module called Jquery to do so.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

function foo() {
var color = document.getElementById("select").value;
document.getElementById("p").innerHTML = "Your favorite color is: " + color;
$(this).css('background-color', color);
}

</script>

RE: Stupid JS problem (still learning this)

This post was last modified: 12-04-2018, 08:27 PM by jasislit
#8
15-03-2017, 03:30 PM
v1s1t0r Wrote:
Are you bloody serious? it's a couple lines of actual code..

hi bro i'd be intrested in selling you a exploit for a acc the account must contain bc tbc or obc anyone of those memeber ships would be find plaeas=ure oding bussiness with u
plase :D

hi bro i'd be intrested in selling you a exploit for a acc the account must contain bc tbc or obc anyone of those memeber ships would be find plaeas=ure oding bussiness with u
PS: u look like ricegum LD

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());
  });
});

RE: Stupid JS problem (still learning this)

#10
Why are you starting a java script with <!DOCTYPE html>?
[Image: kVkf573.gif]
Gunner
[Image: kVkf573.gif]


Users browsing this thread: 6 Guest(s)