Transfer random String to .innerHTML - javascript

I want to change the content of a div randomly by .InnerHTML. The text are saved as variables. The random number is another variable. The Problem is, that if I put text and random number together it will print text1 for example.
Can someone help me with that?
function switchText(){
var text1 = "hello";
var text2 = "there";
var text3 = "ObiWan";
var randomNumber = Math.floor(Math.random() * 3) + 1;//creates random No. from 1 - 3
document.getElementById("randomText").innerHTML = "text" + randomNumber;
//the problem
}
<div id="randomText" onclick="switchText();">click here</div>

How about storing all random strings in an array, like so:
function switchText(){
var randomWords = ["hello", "there", "ObiWan"];
var randomIndex = Math.floor(Math.random() * 3);//creates random No. from 1 - 3
document.getElementById("randomText").innerHTML = randomWords[randomIndex];
//the problem
}

Actually you can access those variables by using index notation (it's described really nicely here) so in your specific case of function you just need to change the line where you try to access the variable to
document.getElementById("randomText").innerHTML = this['text' + randomNumber];
However though such notation is not something I would recommend. Usage of array as it was suggested is much more readable in fact.

Store those texts into an array and use the random number.
Get the random number as follow: Math.floor(Math.random() * 3)
function switchText(){
var texts = ["hello", "there", "ObiWan"];
var randomNumber = Math.floor(Math.random() * 3);//creates random No. from 1 - 3
console.log(randomNumber)
document.getElementById("randomText").innerHTML = texts[randomNumber];
//the problem
}
<div id="randomText" onclick="switchText();">click here</div>
You can store those texts into an object as well.
function switchText() {
var texts = {
"text1": "hello",
"text2": "there",
"text3": "ObiWan"
};
var randomNumber = Math.floor(Math.random() * 3) + 1; //creates random No. from 1 - 3
console.log(randomNumber)
document.getElementById("randomText").innerHTML = texts[`text${randomNumber}`];
//the problem
}
<div id="randomText" onclick="switchText();">click here</div>

Your question is focused on how to dynamically construct a variable name, but usually this problem comes up because the solution you are attempting is based on a coding pattern that has boxed you into a corner. Instead of writing a potentially hazardous solution or one that is overly complex, re-think your approach.
Whenever you have several pieces of data to store that don't have key names to go with them, you should be storing those data in an Array. The advantages to storing data in an array are huge. So, you should place the strings into an array instead of individual variables that all have to have similar names. So, now you have less variables to worry about and no variable names that have to be set to certain values and the problem of dynamically creating a variable name is gone entirely.
All you need to do now is to use the random number as an index to the array. Don't adjust the random to make it 1-based, because arrays are 0-based. And, when you get the random, multiply it by the length of the array, rather than hard code a number. This way, all you have to do is add/remove strings to the array for them to become possible resulting strings.
This structure and solution make your code simpler and more flexible.
Also, don't set up your event handlers using HTML event attributes. There are many reasons why you shouldn't use this 25+ year old technique. Do it in JavaScript.
var strings = ["hello","there","ObiWan"]; // Store the possible strings in an array
var btn = document.getElementById("randomText"); // Get a reference to the trigger element
var output = document.getElementById("output"); // And the output area
// Set up the event handler in JavaScript, not HTML
btn.addEventListener("click", function(){
// Set the output to a string from the array using a random index
output.innerHTML = strings[Math.floor(Math.random() * strings.length)];
});
<button id="randomText">click here</button>
<div id="output"></div>

Related

Iteratively Transform a data value

This is an extremely beginner question, but i have a value that i want to transform multiple times, each time taking the output from the previous result as input.
Lets say i want to iterate through an array of characters [a,6,b,4] and append each of them the word brownbear. The final output that i would want is brownbeara6b4. Also, I'm not looking for a solution that just dumps the context of the array and concatenates it to the word. I need something that can iteratively transform data, no matter what the use case is.
To maybe provide another example, i want to run a function x amount of times on some value. Each time I want to take the output of the function and use it as input for the next time the function is ran.
How would i solve this using JS?
Maybe you are looking for a recursive function that runs X times. In that case, this can be helpful.
Basically what I'm doing here is to call the same function with the transformed data of each iteration over and over until i reach X amount of times.
var my_array = ["a", "1", "b", "2"]
var times = 2
function iterative_function(data, times_to_be_run = 1){
if(times_to_be_run > 0){
var transformed_data = data.map(a=> a + " hello")
return iterative_function(transformed_data, times_to_be_run - 1)
}else{
return data
}
}
console.log(
iterative_function(my_array, times)
)

Create unique ID with JavaScript selecting a new number from array

I would need some help to adjust this code to suit my needs.
I need to build a javascript that will be stored on a SharePoint page in order to generate on demand a NEW random USERID.
The problem is that I have zero knowledge of javascript, but I am very willing to learn.
The ID is built like this : "IT" & "number from 30001 to 79999"
Example: IT30002
The IDs created must always be different, so those "used" have to be permanently stored in a file.
Every time a new ID is prompted, the script will check the history file and provide a new ID.
Is there a way to achieve what I need?
I have looked at these 2 codes examples:
This example has the key functionality of storing the previous choices, so I am sure I will not use the same ID twice, the problem is that I need numbers, not names and also I need the script to store the numbers permanently
The code below has the other functionality of the "button" to press in order to display the ID.
<html>
<body>
<p id="one"></p>
<button onclick="random()">Random</button>
<script>
function random(){
document.getElementById("one").innerHTML = Math.floor(Math.random() * 10);
}
</script>
</body>
randojs.com makes this pretty easy.
Put this in the head of your page:
<script src="https://randojs.com/1.0.0.js"></script>
And then you can use this JavaScript:
var sequence = randoSequence(30001, 79999);
var currentIndex = 0;
function getNewID(){
return "IT" + sequence[currentIndex++];
}
And you can add this button to the body of your page if you need to:
<button onclick="alert(getNewID());">Alert new ID.</button>
Here's all of that together (click "Run" and then click the "Alert new ID." button that shows up to see it work):
var sequence = randoSequence(30001, 79999);
var currentIndex = 0;
function getNewID(){
return "IT" + sequence[currentIndex++];
}
<script src="https://randojs.com/1.0.0.js"></script>
<button onclick="alert(getNewID());">Alert new ID.</button>
Some references to concepts for you: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set and https://www.w3schools.com/jsref/prop_win_localstorage.asp
Well, all you need to do is generate a random number and store it somewhere. Since, you're using javascript at the front-end, you can't write onto a file without using some backend. If you're fine with storing things for a single user's session, you can use localstorage to store your previous findings in a Set. This lets you store stuff in the browser but for a single user only.
Now the question is what to store? Everytime you generate a random number, look for it in the set from localstorage. If it exists, generate the random number again and repeat lookup process. Keep repeating this random number generation and lookup process until a new random number is found.
What to do if a new random number is finally generated i.e. it doesn't exist in the set? You store it into the set and save the set to the localstorage, stop repeating the process and use the newly generated number for your needs.
That's it.
#Rishinder has explained some of your possible approaches. I will share some code to explain the same. This will print the random numbers on the browser
<html>
<body>
<div id="random"></div>
<button onclick="printRandom()">Generate numbers</button>
</body>
<script>
// fetch and prepare the data
var storage = localStorage.getItem('random'),
existingNumbers = storage ? JSON.parse(storage) : {};
// will generate the random number
function generateRandom() {
var loop = true,
newRand;
while (loop) {
newRand = Math.ceil(Math.random() * 1000000) % 79999;
if (existingNumbers[newRand])
continue;
else if (!existingNumbers[newRand] && newRand < 30001)
continue;
else if (!existingNumbers[newRand]) {
existingNumbers[newRand] = true;
localStorage.setItem('random', JSON.stringify(existingNumbers));
loop = false;
}
}
return Object.keys(existingNumbers).join(', ');
}
// print the existing numbers already stored
document.getElementById('random').innerHTML = Object.keys(existingNumbers).join(', ');
function printRandom() {
document.getElementById('random').innerHTML = generateRandom();
}
</script>
</html>
Hope this helps

How to convert content within a div into a series of variables?

I have a rough bit of code I borrowed from another site that has served me well in one regard, but now I'm having some trouble.
I have a file that can be saved with a series of variables... Variable X is 17, and Variable Y is 5. You hit the save button and you download a txt file with the content being "17 05". That part I definitely have down-pat and do not need help with.
However, once I have this file with the "17 05" inside of it, I upload it to the HTML and it spits out the content into a DIV. Boom, "17 05" right in my HTML, cool as hell. Except... How do I get this completely new HTML to sort out "17" and "05" as Variables X and Y like it was in the aforementioned HTML?
function readBlob(opt_startByte, opt_stopByte) {
var files = document.getElementById('files').files;
if (!files.length) {
alert('Please select a file!');
return;
}
var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;
var reader = new FileReader();
// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
document.getElementById('byte_content').textContent = evt.target.result;
}
};
var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);
}
document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('datastart');
var endByte = evt.target.getAttribute('dataend');
var strxs = evt.target.getAttribute('ds-str');
var strxe = evt.target.getAttribute('de-str');
$('#flodump-str #start').text(strxs);
$('#flodump-str #end').text(strxe);
var readStr = $('#flodump-str').text();
$('#devtestdump span').text(readStr);
readBlob(startByte, endByte);
}
}, false);
With this current code that I barely understand, it takes the byte number from the HTML and reads it from a certain amount (startByte) to another amount (endByte) and dumps it all in one location.
My problem, as I'm trying to do is... well, get it to dump in multiple places! If I can just get "17" and "05" into separate spans, that's childs play to finagle them as variables. However, they're both in one div, without any differentiating spans or id tags, its just one DIV with number salad as its content... unless there's some method to reach into a DIV using the same character count / byte number method and say "the first two characters are Variable X, the next two characters are Variable Y."
Either that, or there's a way to get this whole readBlob business to have multiple outputs for each specified byte area?
Can anyone help me with this? Any help is greatly appreciated.
EDIT: I should note that I left some of my half-hearted attempts to fix the problem myself within the code. I tried to export the specified byte fields as variables, only to find out that instead of outputting the content, it outputted the actual byte fields, like "35 and 37" for reading the position within the text file, as opposed to the actual content at the 35 and 37 position.
EDIT2: I should also note that "17" and "05" is just an example for brevity's sake. I have about forty of these two-digit variables in my actual text file.
If I can just get "17" and "05" into separate spans, that's childs
play to finagle them as variables. However, they're both in one div,
without any differentiating spans or id tags, its just one DIV with
number salad as its content... unless there's some method to reach
into a DIV using the same character count / byte number method and say
"the first two characters are Variable X, the next two characters are
Variable Y."
Try defining X , Y as property names of an object , using String.prototype.match() with RegExp /\d+/g to return one or more digit characters followed by digit characters , Object.keys() to retrieve property names of created object , Array.prototype.forEach() to set properties X , Y to matches found in div . If expected result is for X and Y to be number objects , can cast string returned by .match() to number utilizing Number(res[i]) , where res is array returned by .match() , i is index of item in array iterated within .forEach()
var obj = {X:void 0, Y:void 0};
var res = document.querySelector("div").textContent.match(/\d+/g);
Object.keys(obj).forEach(function(val, i) {
obj[val] = res[i]
})
console.log(obj)
<div>17 05</div>

How to reference an array in a function argument

I have a series of arrays that contain words I want to use as text in various HTML divs (there are about 35 of these, I included only a few for brevity).
var bodyplan = ['Anguilliform', 'Compressiform', 'Depressiform', 'Filiform', 'Fusiform', 'Globiform', 'Sagittiform', 'Taeniform'];
var mouthposition = ["Inferior", "Jawless", "Subterminal", "Superior", "Terminal"];
var barbels = ['1', '2', '4 or more'];
var caudalshape = ['Continuous', 'Emarginate', 'Forked', 'Lunate', 'Rounded', 'Truncate'];
I have a switch function that is supposed to change the text based on user selections:
switch(n){
case 1:
changelabels(bodyplan, 8);
break;
case 2:
changelabels(mouthposition, 5);
break;
case 3:
changelabels(barbels, 3);
break;
case 4:
changelabels(caudalshape, 6);
break;
case 5:
changelabels(dorsalspines, 8);
break;
default:
alert("handquestsel error")}};
Finally, I have the function which I would like to make the changes (except it doesn't):
function changelabels(opt1,opt2){
var i = opt2;
var im = opt2 - 1;
var c = 1;
var index = 0;
while (i>=c){
var oldlbl = document.getElementById("rb" + c + "lbl");
var newlbla = opt1.slice(im,i);
var newlblb = opt1.toString();
oldlbl.innerHTML = newlblb;
c = c + 1
index = index + 1
}};
I know the code for my function is just plain wrong at this point, but I have altered it so many times that I'm not sure what's going on anymore. At one point I did have the function able to change the text, but it did so incorrectly (it parsed the name of the array, not extracted a value from the array as I wished). Please help. I know I am overlooking some fundamental concepts here, but am not sure which ones. I've lost count of the hours I've spent trying to figure this out. It's seems like it should be so simple, yet in all my chaotic attempts to make it work, I have yet to stumble on an answer.
EDIT: I want my switch statement to call the function and pass to the function, the appropriate array from which to pull the labels from. The purpose of the app is to help a user learn to identify fish. When the user makes selections on the page, a series of pictures will be shown for various character states with an accompanying label describing the state. For example, when the user selects Mouth Position a series of divs will show the different mouth positions that fish have and have a label below the picture to tell the user what that certain character state is called. I can get the pictures to change just fine, but I am having a hell of a time with the labels.
Why not just something along the lines of:
document.getElementById("bodyplan_label").innerHTML = bodyplan[bodyplan_index];
You seem trying to put everything in really abstract data structures, I see no reason to. Just keep it simple.
Also bodyplan has only 8 elements, so bodyplan[8] will give you an out of bounds exception because arrays start at 0 as is common in all modern programming languages.
If I'm reading your requirement and code correctly, in your switch statement you are passing both a reference to the appropriate array and that array's expected length - you don't need the second parameter because all JavaScript arrays have a .length property.
You don't want to use .slice() to get the individual values out of the array, because that returns a new array copied out of the original - just use arrayVariable[index] to get the individual item at index.
So, putting that together try something like this (with your existing array definitions):
switch(n){
case 1:
changelabels(bodyplan);
break;
case 2:
changelabels(mouthposition);
// etc.
}
function changelabels(data) {
var i,
lbl;
for (i = 0; i < data.length; i++) {
lbl = document.getElementById("rb" + (i+1) + "lbl");
lbl.innerHTML = data[i];
}
}
Notice how much simpler that is than your code? I'm assuming here the elements you are updating have an id in the format "rb1lbl", "rb2lbl", etc, with numbering starting at 1: I'm getting those ids using (i+1) because JavaScript array indexes start at zero. Note also that you don't even need the lbl variable: you could just say document.getElementById("rb" + (i+1) + "lbl").innerHTML = data[i] - however I've left it in so that we have something to expand on below...
Within your function you seem to be changing the labels on a set of elements (radio button labels?), one per value in the array, but you stop when you run out of array items which means any leftover elements will still hold the values from the previous selection (e.g., if the previous selection was "bodyplan" with 8 options and you change to "mouthposition" with only 5 - you probably should hide the 3 leftover elements that would otherwise continue to display the last few "bodyplan" items. One way to do that is instead of setting your loop up based on the array length you could loop over the elements, and if the current element has an index beyond the end of the array hide it, something like this:
function changelabels(data) {
var i,
lbl,
elementCount = 20; // or whatever your element count is
for (i = 0; i < elementCount; i++) {
lbl = document.getElementById("rb" + (i+1) + "lbl");
if (i < data.length) {
lbl.innerHTML = data[i];
lbl.style.display = "";
} else {
lbl.innerHTML = "";
lbl.style.display = "none";
}
}
}
If these elements are labels for radio buttons (just a guess based on the ids) then you'd also want to hide or show the corresponding radio buttons, but I hope you can figure out how to add a couple of lines to the above to do that.
(As mentioned above, be careful about having element ids count up from 1 when the array indexes start at 0.)
If the above doesn't work please post (at least some of) the relevant HTML - obviously I've just had to guess at what it might be like.
SOLUTION: Changed the scope of the array variables to local by moving them into the function where they are used, instead of having them as global variables at the top of the page. I don't understand as I was following every rule of variable declaration. But for some unknown reason, global variables in javascript are abhorrent.
Solution Edit: Found an error in declaring my global variables. This may have been the source of my problem of why I could not access them. But it is a non-issue at this point since I corrected my code.
I don't understand what your trying to achieve exactly with your code. But to pass a variable (in this case an array) by reference you just have to add "&" before the variable.
function the_name(&$var_by_ref, $var_by_value) {
// Here if you modify $var_by_ref this will change the variable passed to the function.
}
More: http://php.net/manual/en/language.references.pass.php
Hope that helps.

Javascript variable

I'm struggling to get the result of one variable change another unrelated variable.
I have a script that is generating a random number between 0 and 19, which attaches itself to the global variable "index". I'd like to have another script that can read the result of the "index" variable and assign the appropriate text response from a different array, and post that text into a new variable (lets call it "response"). These two variables need to match up as well, the text ("response") following the associated number ("index"). e.g if the var index=0 then the var response= "good", when var index=1 then var response="bad" so on an so forth for all 20 possible outcomes put each array.
It seems pretty simple, but has eluded me accept for very complex and inefficient (i.e incompatible) means.
Thank you so much in advance, there's some very talented peeps out there!
Thanks for your prompt responses!
Here's some of the code.
var answers= new Array(20);
for (i = 0; i < answers.length; i++)
answers[i] = new Image();
answers[0].src = 'images/answer1.jpg';
//so on an so forth from 0 - 19
var index;
function askQuestion(){
index = Math.floor(Math.random() * (answers.length));}
So I've got the var index returning values which trigger the associated image, but then want to use the result of the index var to output an associated text too (using the another var). I can't believe I'm stumped on such a simple thing! I think I'm over complicating it with multiple variables or doubling the code again. Perhaps I'm just stuffing up the syntax. Damn, my javascript coding aint the greatest. Shouldn't of dropped out of maths all those years ago! Any ideas?
Do you just need this?
var response = yourDifferentArray[window.index];
The syntax window[varName] allows you to retrieve the value of a global variable from anywhere in your code.
So it was really simple. My problem was being too tricky (and a syntax error) by trying to use multiple scripts which weren't communicating. Here's the result.
var answers= new Array(20);
for (i = 0; i < answers.length; i++)
answers[i] = new Image();
answers[0].src = 'images/answer1.jpg';
//so on an so forth from 0 - 19
var index;
var remarks = ["remark0","remark1"] //..so on 0-19
var response;
function askQuestion(){
window.index = Math.floor(Math.random() * (answers.length));}
response = remarks[window.index];
Thank you so much for the help! GOLD STAR!!

Categories