JavaScript: Accessing Variables from Other Files and Changing their Properties - javascript

So I am making a hacking type game coded with HTML and JavaScript, and I made a Store.html file for my store to purchase upgrades for your hacking system. I have several variables that I want to view and change from a different file than the one that I originally have it inside of.
Variable 1
var tutorialDone = false
Variable 2
var jobBoolean
Variable 3
var bitCoins = 30
var currentBit = bitCoins
I want this to be false because when the tutorial mission is finished, then I want to change the jobBoolean variable to "true" because when the tutorial mission is completed, then I want a new list of missions/jobs to show up on thee screen. The first mission is a seperate page. At the end of the mission when it is completed, then "tutorialDone" I want to be equal to "true", so that when I am back at the homepage, I can change the jobBoolean to true. Because the "tutorialDone" variable is dependent on the "jobBoolean" variable. When "tutorialDone" equals "true" so does "jobBoolean". I don't know how to make "tutorialDone" change along with the "jobBoolean".
I have for the third variable, there is two. That is because they are similar. I have a function inside the "Store.html" document that when an item is purchased, it grabs a variable which in this case is "currentBit". "currentBit" is equal to "bitCoins" because I thought that if I made a new variable, "currentBit", then set it equal to "bitCoins", it would connect with "bitCoins" from a seperate file. This was my only "solution" I could think of, but it doesn't work.
Also, as a bonus answer for you guys, how can I make an "if" statement in JavaScript, and then have it check if the variable I give it is equal to something, and if it is, run some code. Because whenever I try it, the function the if statement is in, it will run through the if part of the statement no matter if the statement is true or false.
Sorry if this question doesn't make much sense. This is just the first big problem I have encountered with JavaScript, that I couldn't fix myself.

Related

Computed Properties to update variable in Vanilla JavaScript

Hey everyone, i need help with something.
I've divided the picture into sections so it's easier to look at.
This is really bugging me and i don't know if i can solve it this way.
Thanks to anyone that can help me... Here i go:
So in section 1 i've created a basic input with a name property, actually i've made 4 of them but this one is the example (the name property is important)
In section 2 , those are the inputs on the page and i need to change the variable depending if the inputs is checked or not
The variable in JS file is called requireInteraction and it's set to false
So im doing a forEach on those 4 inputs (each one has a name property that matches the variable name in JS) and i want to change the variable in JS if the checkbox with that name is Checked. I tried using Computed Properties.
So when silent is checked (with the silent name property) i want the variable "silent" in JS to switch to true.
How can i extract the input name (which has the same name of the JS variable) and make it so it's like i actually typed "silent = true" and changed the JS variable.
I don't really know why you can't use
requireInteraction = true;
but here, in case that you have some reason you can't just use the variable directly, you could use an object to serve as a target to index into:
const context = {
requireInteraction: false,
};
Then later on, you can use something similar to your original code:
context[el.name] = true;

Is it wrong to store a number inside an HTML tag?

I'm learning how to integrate Javascript into HTML, and I had an idea for some odd code. I can't say for certain if there is something wrong with it.
My goal was to create a counter that is displayed on the page that starts at 1 and increases every time a function is called.
My original code was something like this:
<p id="counter"></p>
<script>
var turn = 1, turn_counter = document.getElementById('counter');
turn_counter.innerHTML = turn;
function increase() {
turn++
turn_counter.innerHTML = turn;
}
</script>
The variable turn would keep track of a number, and turn_counter would keep track of the <p> tag. The contents of this tag were then set to turn. When the function increase() was called it would increment turn and then adjust the tag to match.
However I realized there was a potential simpler solution:
<p id="counter">1</p>
<script>
var turn_counter = document.getElementById('counter');
function increase() {
turn_counter.innerHTML++
}
</script>
This writes "1" inside the <p> tag and then sets the variable turn_counter to that tag. Then whenever the increase() function is called it simply increases the number inside the tag.
While both solutions work, I feel like there must be some problem with using the second one. Something about storing a variable inside an HTML tag doesn't feel right. So are there any problems with the second solution?
(Also if there are any better ways of doing this I'd be open to them. I'm still very new to this.)
While with the first solution you are actually storing a variable in Javascript in the second example you are making use of Javascript "quirks" but it's probably not what you wanted.
When you read the innerHTML of the counter div, Javascript finds a string number, as "1" but since "1" is shallow equal to 1, Javascript tries to apply mathematics to it and does what you asked.
Is it working? Yes.
Is it bad? Also yes.
But why is it working? It's working because of Javascript's type coercion and type casting based on that.
Why is it bad? It's not bad because of type coercion, it's not good because of the fact that you are saving your application state on the UI layer which is doable but not a good op.
You are not storing a variable in this case, you are just making use of Javascript weird behaviors. You could potentially parse the innerHTML to turn it into a number but it's yet far from a solution as you wouldn't properly save "state" for your javascript application, which is where to logic resides!
You could see HTML as the UI layer (unstyled) but you want to keep the logic (like variable declaration and usage) inside Javascript.
As proposed by #GrafiCode in the comments, you could
const whatAmI_1 = div.innerHTML + 1
const whatAmI_2 = div.innerHTML++
typeof whatAmI_1 // string, 11
typeof whatAmI_2 // number, 2
This is because the increment operator (++) parses the string, casts it to a number and applies the necessary incrementation while the + 1 is seen as a concatenation of strings as the second value (+1) gets parsed and casted to string by Javascript.
#Wiktor Zychla noted that maybe the word "quirks" is not explicative enough about the choices made by Javascript. Type coercion is not something bad or wrong, it's part of Javascript and if you know what it is and how to use it, you can do a lot of things.

How can I add permanent data into an variable

I'm working on a project that plays a game of rock paper scissors
the game works fine but i want to add something into it. a pointing system where it will add 1 each time a player win but i can't seem to make this work i've been trying to find workarounds for almost 2 day now but i can't seem to find any solution. The thing is the code works but after i log the function that adds 1 to a variable but after that it returns to it's original value which is 0.
const one = 1
function addone(test){
test += 1
}
addone(one)
console.log(one)
This print the original value like the function did not do anything to it. im so confused.
I see two problems in your code:
one is a const variable. That means that you can't modify its initial value.
test is a local variable inside your function, that means function won't modify the values of the variable that you pass as parameter (one).
There is an operator(++) that add a unit, I highly recommend you to use it instead of make a function:
var one = 1
one++;
console.log(one)
If you want to use a function you have to do like this:
var one = 1
function addone(test){
return test+1;
}
one = addone(one);
console.log(one)
In terms to store permanent data into a javascript variable, that's not possible. Variable are stored in RAM, that means that when you stop the program, al data of your program are wiped. Permanent store are made in database and other complex data structures.
If you want to play multiple games, you should consider to allow the players to play more games before the program finish.
thank you very much i never think that i could get more dumb so i cant manipulate it because it's just a copy of that variable that im inputing as parameter? so it means that the function did not touch the variable at all. I wish i could go back to my mother's womb.
and the const it's just a typo very sorry for this.
i did not know this website is very active i thought i would wait days just to get a response thank you very much and have a nice day

Botpress concatenate variable, as argument, in execute code action form

I know if I pass {{variable}} (like a {{event.text}}) in args field of action form works fine.
But, when I try concatenate this variable with a another String, this not work.
Result in {{state.api_url}}/users string, and I need http//myapi.com/users
Is it possible?
I may have an extremely kludgy workaround for this based on bad javascript.
I was looking to iterate a temp variable downwards. I did the assignment in the raw code box for a transition
Good code like temp.variable==1 would be a true/false test.
But just using one equals sign performs the assignment.
So temp.variable=temp.variable-1 in the raw code box subtracted one from my (numeric value) variable.
This seems to return False for the purposes of the transition so it doesn't matter where you point it as long as it's in the chain.
It seems to work for me, anyway.
I'm properly not sure what your code would look like, perhaps you make a new variable then do a transition with
temp.variable_you_just_made=state.api_url+'/users'
then call that variable doing your url thing?
[Looking around I come to suspect the correct thing would be to make a new action https://botpress.io/docs/10.0/getting_started/trivia_actions/ but I am new to all this]

Different results for %%GLOBAL_ProductID%% and 'actual' product ID - Bigcommerce - why?

I am working on a project where I need to reference an unchanging attribute of a product (an item on the site). In the past I have referenced them using the value of an attribute called "data-product". This value is the ID of the product that has been assigned to it by Bigcommerce, so it will never change. Yesterday I discovered the global product_id variable (%%GLOBAL_ProductID%%) so I did a few tests.
When I take the value of the product ID variable and print it to the console:
<span id="the-id-of-the-product">%%GLOBAL_ProductId%%</span>
<script>
var theProductIdNumber = $.trim($('span#the-id-of-the-product').text());
console.log(theProductIdNumber);
</script>
I get a different number then when I inspect the same product and look at the value of the 'data-product' attribute:
Even more confusing, I found one case where the value for %%GLOBAL_ProductID%% what the same number (string) for two different products.
Can you tell me why this is happening? I assumed that using the BC defined global variable would be a more solid method of referencing the product, since thats kind of what it seems like it's for.
As always, your time and help is much appreciated, and I hope you all have a nice day.
I realize this is an old post but I had the same problem today and believe I understand what is going on.
My JavaScript was referencing GLOBAL_ProductId at the bottom of the product.html template. The value was never correct and was also unchanging. Looking deeper, I noticed that it always seemed to be the ID for the last product shown in the Related Products region.
I took the JavaScript variable initialization out of product.html and moved it to ProductDetails.html and the problem was solved. It looks like when the Related Products region is generated, someone decided to recycle the Global_ProductID variable. Or...something like that, yuk.
Your theme may not even include a ProductDetails.html, but if you tinker around with where you initialize variables that reference GLOBAL_ProductID, that might square you away.

Categories

Resources