如何在单个Script文件中放置两个JavaScript函数？（双Div样式异常）

我是JavaScript新手，正在开发一个通过select/option值修改两个div元素样式的网页项目。尝试将控制两个div的代码整合后，仅第二个div的样式会响应修改。已尝试以下方法但均未解决：

• 链接两个源文件
• 合并为单个脚本（含函数或变量合并）
• 在HTML中放置多个独立脚本

项目用于在二级域名主机上制作网页按钮生成器，相关代码如下：

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

问题原因 #

核心问题是重复使用同一个变量名导致覆盖：你用var change先获取了Box1元素，之后又用同名变量获取Box2。由于var声明的变量是全局作用域，后面的赋值会直接覆盖前面的变量值。当第一个div的select触发事件时，事件里的change已经变成了Box2，所以修改的始终是第二个div的样式。

修复方案 #

方案1：使用不同变量名 #

直接给两个div元素分配不同的变量名，避免覆盖：

var changeBox1 = document.getElementById('Box1');

document.getElementById('1stforeground').addEventListener('change', function(){
  changeBox1.style.color = this.value;
});

document.getElementById('1stfont').addEventListener('change', function(){
  changeBox1.style.fontFamily = this.value;
});

document.getElementById('1stbackground').addEventListener('change', function(){
  changeBox1.style.backgroundColor = this.value;
});

document.getElementById('1stbgImage').addEventListener('change', function(){
 changeBox1.style.backgroundImage = this.value;
});

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

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

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

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

document.getElementById('2ndbgImage').addEventListener('change', function(){
 changeBox2.style.backgroundImage = this.value;
});

方案2：封装复用函数（更简洁） #

为了减少重复代码，封装一个通用函数来绑定事件，传入目标div的ID和select的前缀（比如"1st"或"2nd"）：

function bindStyleControls(targetDivId, prefix) {
  const targetDiv = document.getElementById(targetDivId);
  
  document.getElementById(`${prefix}foreground`).addEventListener('change', function(){
    targetDiv.style.color = this.value;
  });
  
  document.getElementById(`${prefix}font`).addEventListener('change', function(){
    targetDiv.style.fontFamily = this.value;
  });
  
  document.getElementById(`${prefix}background`).addEventListener('change', function(){
    targetDiv.style.backgroundColor = this.value;
  });
  
  document.getElementById(`${prefix}bgImage`).addEventListener('change', function(){
    targetDiv.style.backgroundImage = this.value;
  });
}

// 绑定两个div的控制事件
bindStyleControls('Box1', '1st');
bindStyleControls('Box2', '2nd');

这种方式不仅解决了变量覆盖问题，还让代码更易维护，后续如果要加第三个div，直接调用一次函数即可。

内容的提问来源于stack exchange，提问作者Kalene