OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to place two Javascript functions inside one script source file?

  • Thread starter Thread starter Kalene
  • Start date Start date
K

Kalene

Guest
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:

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:

  1. Link to two source files.
  2. Combine them into one script (whether with function() or combining variables)
  3. 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.

<p>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.</p>
<p>This is the code:</p>
<pre><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>
</code></pre>
<p>I already tried the following and I probably <strong>did all of them wrong</strong>:</p>
<ol>
<li>Link to two source files.</li>
<li>Combine them into one script (whether with function() or combining variables)</li>
<li>Place them as separate scripts inside an html document.</li>
</ol>
<p>EDIT: <em>It only changes the second box.</em></p>
<p>EDIT: <em>I am using it to make a web button maker on my secondary domain webhost website.</em></p>
 

Latest posts

P
Replies
0
Views
1
Paras Chouhan
P
Top