Frontend Development

Stupid JS problem (still learning this)

Submitted by AAA, , Thread ID: 21709

Thread Closed
AAA
Offline
Level:
0
Reputation:
73
Posts:
834
Likes:
110
Credits:
582
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
paped

RE: Stupid JS problem (still learning this)

Jackz
Member
Prime
Level:
0
Reputation:
12
Posts:
147
Likes:
18
Credits:
79
10-06-2016, 10:59 PM
#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)

AAA
Offline
Level:
0
Reputation:
73
Posts:
834
Likes:
110
Credits:
582
OP
10-06-2016, 11:13 PM
#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)

Jackz
Member
Prime
Level:
0
Reputation:
12
Posts:
147
Likes:
18
Credits:
79
10-06-2016, 11:16 PM
#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)

raspucay
Newbie
Level:
0
Reputation:
0
Posts:
16
Likes:
0
Credits:
1
15-03-2017, 03:28 PM
#5
Wow !!! Can you provide a tutorial on this??

RE: Stupid JS problem (still learning this)

God
Senior Member
Level:
0
Reputation:
61
Posts:
819
Likes:
118
Credits:
1.09K
15-03-2017, 03:30 PM
#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)

Exper123
Newbie
Level:
0
Reputation:
0
Posts:
15
Likes:
0
Credits:
1
19-08-2017, 10:13 PM
#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)

jasislit
Closed Account
Level:
0
Reputation:
0
Posts:
12
Likes:
0
Credits:
22
12-04-2018, 08:27 PM
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)

20-04-2018, 04:20 PM
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)

zeus
nudes?
Level:
0
Reputation:
55
Posts:
950
Likes:
143
Credits:
365
23-04-2018, 12:12 AM
#10
Why are you starting a java script with <!DOCTYPE html>?
[Image: kVkf573.gif]
Gunner
[Image: kVkf573.gif]

1
mykanupov

Users browsing this thread: 1 Guest(s)