Question 393246 in Html Question posted in
Some basic documentation can be found here.

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

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:

  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.

Tags:

2

Answers


  1. 0

    First of all, this way of assigning handlers isn’t really ideal. Imagine you had to deal with a dynamic number of selectors, for example.

    In any case, seeing as that is outside the scope of the question, you’ll solve your issue by not reusing change as a variable name between the two elements.

    Also, you can’t repeat var change = ... multiple times in the same function. The first time you declare the variable, you can use: var change = ... and, if you want to modify the value assigned to that variable later on in your function, you would simply use: change = ..., without repeating var.

    For your case in particular, you’ll want to use two different variables until you learn to dynamically assign event listeners, etc. to your different elements programmatically.

    Your code should look as follows:

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

var change2 = document.getElementById('Box2');

document.getElementById('2ndforeground').addEventListener('change', function(){
  change2.style.color = this.value;
});

document.getElementById('2ndfont').addEventListener('change', function(){
  change2.style.fontFamily = this.value;
});

document.getElementById('2ndbackground').addEventListener('change', function(){
  change2.style.backgroundColor = this.value;
});

</script>

    The reason your original code was only changing the second box, was that you were actually reassigning the value for the change variable. That means, that the last time your performed a: change = document.getElementById('blah'); would override every other time you assigned a value to it.

    Login or Signup to reply.
  2. 0

    This issue is happening because you declared the change variable 2 times for 2 different purposes and they affected each other.

    Try to declare them as superheated two variables such as box1 and box2 then apply your functions on these separated variables which will avoid and conflicts between them.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search