I am absolutely new to Javascript. And I am making a web project that changes the styles of two div elements using select/option values. However, it will not work when I attempt to put the codes together.
This is the code:
<html>
<head>
<style>
div{
width:100px;
height:50px;
border:1px solid Black;
margin: 10px; padding:6px;}
select{
width:150px;
height:30px;}
</style>
</head>
<body>
<div class="Box1" id="Box1"> This is the First Box. </div>
<div class="Box2" id="Box2"> This is the Second Box. </div>
<br><br>
<h4>First Box Style</h4>
<select name="font" id="1stfont">
<option value="Arial">Arial</option>
<option value="Tahoma">Tahoma</option>
<option value="Georgia">Georgia</option>
</select>
<select name="foreground" id="1stforeground">
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Brown">Brown</option>
</select>
<select name="background" id="1stbackground">
<option value="White">White</option>
<option value="Tan">Tan</option>
<option value="Black">Black</option>
</select>
<select name="bgImage" id="1stbgImage">
<option value="url('https://sadhost.neocities.org/images/tiles/leavesbg.gif')">Pattern #1</option>
<option value="url('https://sadhost.neocities.org/images/tiles/tumblr_inline_mlkxsmQayT1r53miq540.gif')">Pattern #2</option>
<option value="url('https://sadhost.neocities.org/images/tiles/gifbground-804-0005.gif')">Pattern #3</option>
</select>
<br><br>
<h4>Second Box Style</h4>
<select name="font" id="2ndfont">
<option value="Arial">Arial</option>
<option value="Tahoma">Tahoma</option>
<option value="Georgia">Georgia</option>
</select>
<select name="foreground" id="2ndforeground">
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Brown">Brown</option>
</select>
<select name="background" id="2ndbackground">
<option value="White">White</option>
<option value="Tan">Tan</option>
<option value="Black">Black</option>
</select>
<select name="bgImage" id="2ndbgImage">
<option value="url('https://sadhost.neocities.org/images/tiles/leavesbg.gif')">Pattern #1</option>
<option value="url('https://sadhost.neocities.org/images/tiles/tumblr_inline_mlkxsmQayT1r53miq540.gif')">Pattern #2</option>
<option value="url('https://sadhost.neocities.org/images/tiles/gifbground-804-0005.gif')">Pattern #3</option>
</select>
<script>
var change = document.getElementById('Box1');
document.getElementById('1stforeground').addEventListener('change', function(){
change.style.color = this.value;
});
document.getElementById('1stfont').addEventListener('change', function(){
change.style.fontFamily = this.value;
});
document.getElementById('1stbackground').addEventListener('change', function(){
change.style.backgroundColor = this.value;
});
document.getElementById('1stbgImage').addEventListener('change', function(){
change.style.backgroundImage = this.value;
});
var change = document.getElementById('Box2');
document.getElementById('2ndforeground').addEventListener('change', function(){
change.style.color = this.value;
});
document.getElementById('2ndfont').addEventListener('change', function(){
change.style.fontFamily = this.value;
});
document.getElementById('2ndbackground').addEventListener('change', function(){
change.style.backgroundColor = this.value;
});
document.getElementById('2ndbgImage').addEventListener('change', function(){
change.style.backgroundImage = this.value;
});
</script>
</body>
</html>
I already tried the following and I probably did all of them wrong:
- Link to two source files.
- Combine them into one script (whether with function() or combining variables)
- Place them as separate scripts inside an html document.
EDIT: It only changes the second box.
EDIT: I am using it to make a web button maker on my secondary domain webhost website.