I'm having problems changing the css in javascript. Here's what i tried making:
<style id="1">
body {
background-color: pink;
}
</style>
<script>
var myVar = document.getElementById("1").style.backgroundColor = "brown";
</script>
The css is working, it is making the background pink, but the javascript isn't changing the css background color to brown.
You are attempting to set the background colour of the <style> tag. This is not how it works. Instead of setting the style of the <style> tag, you should set the style of the body itself. This W3Schools Article gives an explanation if you need one.
<head>
<style>
body {
background-color: pink;
}
</style>
</head>
<body id="1">
<script>
document.getElementById("1").style.backgroundColor = "brown";
</script>
</body>
It's also worth noting you don't need to assign the element to a variable unless you are going to use it later.
You can try This :
var myVar = document.getElementById("1").style.backgroundColor = "brown"; body {
background-color: pink;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body id="1">
</body>
</html>Use document.body.style.backgroundColor = "brown";, you can't put ids' or classes on non-elements. Try this;
var myVar = document.body.style.backgroundColor = "brown";body {
background-color: pink;
}This selects the body element, you could also put id = "1" on the body element.