Tips for embedding two JavaScript functions in a single script source file?

Question

Tips for embedding two JavaScript functions in a single script source file?

I'm completely new to the world of JavaScript. Currently, I'm working on a web project where I want to dynamically change the styles of two div elements based on select/option values. Sadly, when I try to merge the codes together, it just won't cooperate.

Here's the code snippet:

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

// Rest of HTML and script omitted for brevity...

I attempted various methods but as far as I can tell, they all turned out incorrectly:

Trying to link both source files.
Efforts to consolidate them into a single script (either with function() or combining variables).
Placing them as separate scripts within an HTML document.

EDIT: It seems to only affect changes in the second box.

EDIT: This is part of my efforts to create a web button generator on my alternate domain hosting site.

javascript html css

Answer 1

Answer №1

Let's consider a more efficient way to assign handlers in this situation. If you were dealing with a variable number of selectors, it could become quite cumbersome.

Setting that aside for now, the key to resolving your issue lies in not using change as the same variable name across both elements.

Furthermore, repeatedly declaring var change = ... within the same function is not allowed. Initially set the variable with var change = ..., and if you need to update its value later on, simply use change = ... without reusing var.

In your specific scenario, it's best to utilize two distinct variables until you can dynamically allocate event listeners to each element programmatically.

Your revised code should appear like this:

<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 why your initial code only affected the second box was due to continually reassigning the change variable. Each instance of:

change = document.getElementById('blah');

essentially overwrote all prior assignments to it.

Answer 2

Let's consider a more efficient way to assign handlers in this situation. If you were dealing with a variable number of selectors, it could become quite cumbersome.

Setting that aside for now, the key to resolving your issue lies in not using change as the same variable name across both elements.

Furthermore, repeatedly declaring var change = ... within the same function is not allowed. Initially set the variable with var change = ..., and if you need to update its value later on, simply use change = ... without reusing var.

In your specific scenario, it's best to utilize two distinct variables until you can dynamically allocate event listeners to each element programmatically.

Your revised code should appear like this:

<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 why your initial code only affected the second box was due to continually reassigning the change variable. Each instance of:

change = document.getElementById('blah');

essentially overwrote all prior assignments to it.

Tips for embedding two JavaScript functions in a single script source file?

Answer №1

Similar questions

The onClick event for a q-btn does not seem to be functioning properly when used

"Revamp Your Layout with Bootstrap 4's Customized Sorting Feature

Here's a guide on executing both GET and POST requests using a single form

Encountering a crash with the NativeDroid HTML5 JS css jQueryMobile template on iOS7

Issue: The hook call is invalid. In React Native, hooks can only be called within the body of a function component

Having trouble with col-span not working as expected in Tailwind CSS?

Having trouble selecting links in the navigation bar

Experiencing hiccups in Angular testing when using Jasmine and Karma, specifically encountering errors with the router-outlet and failing component creation tests

Preventing a hyperlink from following its destination path

Preserving scroll position during page navigation in Next.js

"Sorry, MongoDB seems to be having trouble with the pretty() function at the

The app's connection issue persists as the SDK initialization has exceeded the time limit

Can I group data by "Month" in Tabulator JS while still retaining the full date information?

localStorage access denied in IE11 on desktop mode, but not in metro mode

"What is the best way to manipulate arrays in vue.js using the map function

When working with React and trying to update data using the useEffect hook, I encountered an issue with an Array data. Unfortunately, using map or Object.keys(data).map did not produce the desired results. Can anyone provide guidance on

Is it possible to create a sharing button on Facebook that includes a JSON attachment?

Design an introduction page with a responsive layout

Determining the height of child elements within a React component

Organizing Bootstrap Divisions in a Grid Pattern