How to make 2 scripts 1 script

JavaScript
1

I am new to javascripting and struggling with it. I also struggle with reference sites for js because it seems I need to know the terms first to know what to search for to find what I’m looking for so I struggle really hard to find the answer on my own.

My question is simple: I have 2 scripts that I’d like to make one script, how do I do that?

I’d like this script:
https://codepen.io/Sickxiczix/pen/ZErYoja

		var startDate = 1651190400000;
		var newDate = new Date();
		var timeNow = newDate.getTime();
		var counter = Math.floor((timeNow - startDate) / 86400000) + 7;
			if (counter >16) { 
				if (Math.floor(counter / 16) == Math.ceil(counter / 16)) 
						{ counter = 16 } 
					else { counter -= (16 * Math.floor(counter / 16)); 
			} 
		}

		document.getElementById("day").innerHTML = counter

And this script:
https://codepen.io/Sickxiczix/pen/PoQweOo

$('#mytable tr th').each(function(){
  var cellValue = $(this).html();
  if(!isNaN(parseFloat(cellValue))) {
    
	if(cellValue == 1 || cellValue == 6 || cellValue == 14 ) { // Set 1
      $(this).css('background-color','#00c2ff');
	  $(this).css('font-weight','bold');
    } 
    
    if(cellValue==2 || cellValue==7){ // Set 2
     $(this).css('background-color','lime');
	 $(this).css('font-weight','bold');
     }
     
    if(cellValue==3 || cellValue==9){ // Set 3
     $(this).css('background-color','#f8B6Ff');
	 $(this).css('font-weight','bold');
     }
    
	if(cellValue==4 || cellValue==10){ 
     $(this).css('background-color','#B2BABB');
	 $(this).css('font-weight','bold');
     }
	 
    if(cellValue==5 || cellValue==12){
     $(this).css('background-color','yellow');
	 $(this).css('font-weight','bold');
     }

    if(cellValue==8 || cellValue==15){
     $(this).css('background-color','#FF7043'); 
	 $(this).css('font-weight','bold');
     }
    
	if(cellValue==11 || cellValue==13 || cellValue==16){
     $(this).css('background-color','#A1887F');
	 $(this).css('font-weight','bold');
     }
  }
});

To be one single script.

I’ve tried putting them together all different ways I could think of. They work without error if they’re separate as shown in the codepen links. Can someone please share how I would get them to work as one script in the same table cell?

Here is the table I want it to work on:

<table border="1" id="mytable"><tr><th>
	<div style="font-size:1.5vw;">Today is day:&nbsp;</div></th>
	<th><span id="day" style="padding: 10px;"><script src="day.js"><!-- I want both scripts working on this cell --></script></span>
	</th>
	</tr>
	</table>

I have asked this question on Stackoverflow and for reasons beyond me a specific user that seems to be following me keeps deleting the question claiming I’m not asking my question clear enough.

I don’t know how else I can possibly ask ‘how do I put these 2 scripts together in to 1 script’ any clearer than this. I do not feel welcome on Stackoverflow since I can’t ask questions good enough for that one user that keeps deleting my questions. I hope my experience here is a better one. I’d like to feel welcome somewhere I can ask questions that help me learn.

2

Not sure I understand your question either.
You put your script tag inside a th tag but script tags are usually placed either in the header or in the body.
Looks to me that you just need one single js file, put your vanilla js and jquery inside that file and just reference it with a script tag in header or body. Do not forget to import jquery (that import must feature before the import of your own js file).

In codepen, you actually do not need to reference your js file. Just put all your vanilla js and jquery inside the js file and then enable jquery through settings (top right)

1 Like
3

It will be a moderator. They aren’t “following you around”, someone else will have flagged your question as being unclear and the moderator will have looked at it and agreed and closed the question. For Stack Overflow to be useful, it has to be on top of this problem; it’s a not a personal attack, the question is genuinely extremely unclear and makes little sense unless you explain what you’ve done that doesn’t work.

The reason it doesn’t make sense is:

It’s just text, whether it’s two “scripts” or the contents of those in a single “script” it doesn’t make any difference: the exact same code would be there. If you want to make one “script”, you select the contents of the second, copy it, and paste it before/after the contents of the first (or vice versa).

So for that to cause something to break, you need to explain what you have done that isn’t just the above copy/paste

2 Likes
4

Thanks for the replies! I haven’t ripped the replies apart to be insulting, I separated them to answer you both and make sure I responded to each individual part of your replies so I didn’t leave anything out. I cut them up in an attempting to make what I’m trying to do and what I have tried as clear as possible.

Please kindly share how a person can more clearly ask ‘How do you combine [this js] and [this js] into one single script so they work?’. Maybe it’s a language barrier? Nobody that’s read it speaks English very well? I really don’t get why that’s not clear enough. Share how, please.

It doesn’t work if it’s not placed where it is. I’ve tried putting it within the header tag where js script files are usually linked to. When I do that the cell is blank even though I call the id for it in the span tag.

Yes. I want to put both scripts together as one script because I believe that’s why they don’t both work.

I don’t know enough about this stuff to know which one is vanilla js and which one’s jquery. From what I’ve seen of both of those languages I assume the first one is javascript and the second one is jquery, that’s an assumption not knowledge.

I have tried simply copy/pasting them together. That’s where my confusion has begun. When I do that the counter script, the one that creates the number, works but the one that changes the cell’s background color does not work.

Here is a codepen of them both simply pasted together as if they were in the same external file showing that issue:

I wouldn’t fully understand the debug message if there was one, there are no errors it just doesn’t work…that’s what I’m trying to figure out and why I assume making one script out of them both might be the solution.

Thank you, yes, I’m aware. It’s in the codepen because I had to put it there or the script didn’t work. Please take the few seconds it takes to delete the js reference and you’ll see; when it’s removed the bottom pane of the codepen that compiles and displays all the code has no color at all. Here’s the link again so you don’t have to scroll up to test that:

No, Sir. They’re not a moderator. Apparently Stackoverflow (SOF) gives users moderator privilege’s when they reach a certain user level. They’re a regular user, not affiliated with SOF staff. Their account is labelled as a contributor.

I’ve asked maybe 13 questions, total, on SOF. This person has commented and flagged every single question I’ve asked. They’ve closed every single one of them as well. Official SOF staff re-opened them agreeing that closing them was not the appropriate action since this person didn’t explain why they closed them.
Anyway! :slight_smile: No reason to go on about what goes on on another site.

I’m taking that as you mean a question, in general, has to be that way. I’m an adult man in my 40s. I retired in my early 40s from being a hands-on industrial Class 8 mechanical engineer most of my life.
Please share how else a person can ask “How do you put [this] and [this] together properly?” I separated it, I gave the code, I shared working examples of it…how else can I make it any clearer? Please show and tell me. I’d be glad to make it clearer if I can.

[quote=“DanCouper, post:3, topic:507184”]
If you want to make one “script”, you select the contents of the second, copy it, and paste it before/after the contents of the first (or vice versa).

I made a mistake not including the result of pasting both of them together does.

I included an example that shows what happens when they’re pasted together does above. That example is the “Futzing Fun” code pen.

They aren’t working when I paste them together. I don’t know why they aren’t both working in the same cell for sure because I don’t know java very well. I assume the solution might be putting them both together. I know enough about coding to know that the syntax in both of them is different which tells me one is one type of java and one is another type of java - maybe converting them both to the same kind of java is the solution to getting it working? …is my thought.

5

it doesn’t work because parseFloat(cellValue) is always null, and cellValue is never equal to a number

no Java here, only JavaScript - it can be weird to find out, but Java and JavaScript have nothing to do with each other

3 Likes
6

You aren’t really using English very well or clearly articulating your problem.

What should these scripts do? You haven’t told us.

What are these scripts doing instead? You haven’t told us.

Ironically enough, StackOverflow has a pretty good guide on how to ask questions.

1 Like
7

Part of being a developer is communication. Being able to explain problems in ways that other developers can understand is very important. This is confusing stuff, and if it is hard to put into words, it’s going to be even harder to understand.

2 Likes
8

Thank you! At least I know what the issue is now. How do I correct that, @ILM?

10

would you learn if I told you what was the issue?

I added some console.logs in your code inside the each callback, and saw what values stuff had. You can try to do the same

3 Likes
11

Thank you! I can’t guarantee I would understand it if you told me what the issues were without examples and fixing the code for me but I would very much appreciate you trying to explain it so I understood it.

I don’t see the console.log. I don’t know what you mean by that or where they might be. I looked at the Futzing Fun codepen. I don’t see any changes. Where are the console logs?

I don’t know enough about java to know what a callback truly is.

I’ll keep looking for the console logs. Thank you very much!

12

This is not Java. This is JavaScript. They are completely unrelated. Searching for information about Java won’t help you here at all.

Ilenia inserted a bunch of console.log(someVariable) statements into the code to see what was happening when the code was running. That lets you see what is occurring when your code runs, though not always why.

1 Like
13

Ok. Thank you. I’ve been visiting MDN to attempt learning.

As ilenia shared isNAN is the issue and I read what isNAN and NAN is on MDN. How do I change the script to make what it displays a number instead of ‘not-a-number’ (NAN). I get it that that’s the issue with why the background color script is working. Lesson very much appreciated!

How do I correct it so it works?

14

NaN and null are different things in Javascript. When tracking down a null or undefined, I first look for the first line where I see null or undefined in my variables.

I switched over to my phone, so I can’t go digging myself, but I’d start logging variables until I find the first one that has a value that is not what I expected.

15

I know what NULL is from previous coding experiences. At least I think I do: nothing, empty, blank. However I’m now confused since NULL was referred to as basically the same thing as what NAN is, in a way.

What do you mean by your suggestion to start “logging” variables?
Changing variables? The variable is always going to be 1 through 16. I’ve been trying to figure this out for 28 days now. So I’ve seen the counter go around almost twice since it’s displaying 12 now and the background color hasn’t changed on any of the numbers.

What I’m gathering from this so far is that I need to make the first script actually display a real value (number) instead of NAN. Am I following correctly?

How do I do that? The reference site I’m going to (MDN) doesn’t share that . It doesn’t say “[this] is the opposite of NAN”. And that’s what I need to learn isn’t it? I need to learn what the opposite of NAN is?

16

JS has some nonstandard number values, like Infinity and -Infinity. It also has NaN, which is a number that couldn’t be evaluated as a number. It’s of type number but isn’t exactly a number.

It is not the same thing as null. They are both falsy values though, so depending on how the code is written, they may be handled the same.

What do you mean by your suggestion to start “logging” variables?

Using console.log to log out the variables to the console/terminal so you can see what they are and figure out where your program is going wrong.

I need to learn what the opposite of NAN is?

There is no opposite. It is just a type of number variable. It would be like asking what the opposite of a rabbit is. NaN is just the result of trying to to evaluate a number that failed.

parseInt('howdy', 10);
// NaN

An important gotcha with NaN is that NaN !== NaN. You can read about that in MDN, which is a great JavaScript resource, by the way.

1 Like
17

logging variables is using console.log to log the variables to the console to find which part of your code is causing the ‘undefined’

18

Do you want the dynamically generated day to be color-coded?

How should it look and where does the date go?

  1. The date element can’t be a span if the coloring code is to work with it, add the date as a <th> element.

  2. The code that dynamically generates the date has to come before the coloring code because the coloring code needs the value (day) to be set first.

As said I, don’t really know if I understand what it is you are trying to achieve or how it should look.

19

to be precise what I added was

$('#mytable tr th').each(function(){
  var cellValue = $(this).html();
console.log({cellValue})
console.log({this})
let h = $(this).html()
console.log({h})
  if(!isNaN(parseFloat(cellValue))) {}
}

so I checked the values of everything

2 Likes
20

I want the cell the value gets printed to / displayed in’s background color to change depending on the value. Is that clear enough? If not:

I want the cell the number is displayed in in the following table to have a different background color depending on what number is displayed:

If the value is 1, 6, or 14 I want the background color to be '#00c2ff':

if(cellValue == 1 || cellValue == 6 || cellValue == 14 ) { // Set 1
      $(this).css('background-color','#00c2ff');
	  $(this).css('font-weight','bold');
    }

If the value in the cell is 2 or 7 I want the background color of the cell to be lime

    if(cellValue==2 || cellValue==7){ // Set 2
     $(this).css('background-color','lime');
	 $(this).css('font-weight','bold');
     }

If the value in the cell is 3 or 9 I want the background color of the cell to be `#f8b6ff’

    if(cellValue==3 || cellValue==9){ // Set 3
     $(this).css('background-color','#f8B6Ff');
	 $(this).css('font-weight','bold');
     }

And so on. This codepen shows the colors I want the background to be for each number:

What it’s not doing that I want it to do is both create the number from the counter script into the cell AND change the background color of the cell. The counter is working but I can’t get the background color change too.

Hopefully that’s clear enough. I’ll try to explain it better if it’s not clear enough.

21

As I said, the date value can’t be inside a <span> element or you need to change the selector for the color code.

Edit: deleted

th instead of span
https://codepen.io/lasjorg/pen/oNEXoEW

Different selector
https://codepen.io/lasjorg/pen/PoQqOQa

2 Likes