如何将两个Javascript函数放入一个脚本源文件中？

问题描述 投票：0回答：1

我对 Javascript 完全陌生。我正在制作一个 Web 项目，该项目使用 select/option 值更改两个 div 元素的样式。但是，当我尝试将代码放在一起时，它不会工作。

编辑：它只更改第二个框。

这是代码：

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

我已经尝试过以下方法，但我可能都做错了：

  1. 链接到两个源文件。
  2. 将它们组合成一个脚本（无论是使用 function() 还是组合变量）
  3. 将它们作为单独的脚本放置在 html 文档中。
javascript html css select stylesheet
1个回答
0
投票

首先，这种分配处理程序的方式并不理想。例如，想象一下您必须处理动态数量的选择器。

无论如何，鉴于这超出了问题的范围，您将通过不重复使用 

change
作为两个元素之间的变量名称来解决问题。

您的代码应如下所示：

<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('change2', function(){
  change2.style.color = this.value;
});

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

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

</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.