Develop Reference

How can I get a random item from multiple arrays based on a checkbox?

I want to only show the text from the arrays that are selected with the checkboxes (so, if i only want txt and ran, it only shows options from those arrays)
function myFunc() {
let txt = ["txt1", "txt2", "txt3"];
let test = ["test1", "test2", "test3"];
let ran = ["ran1", "ran2", "ran3"];
let tst = txt[Math.floor(Math.random() * txt.length)] + "<br><br><br>" + test[Math.floor(Math.random() * test.length)] + "<br><br><br>" + ran[Math.floor(Math.random() * ran.length)];
document.getElementById("tst").innerHTML = tst;
}
<input type="checkbox"> txt<br>
<input type="checkbox"> test<br>
<input type="checkbox"> ran
<br>
<br>
<button onclick="myFunc()">One Character</button>
<p id="tst">
sum text lol
</p>
Code: https://jsfiddle.net/RoseLovesGreene/ps17u8yd/6/
I'd also like to be able to show it in a random order so that each array doesn't have it's own line.

To get the values of your checkboxes, you need to give them actual values - and to reference the arrays without a bunch of IF statements, they need to be referencable in something like an object.
This will get random values from each array as it loops the forEach, but the final output needs to be shuffled (per your spec). There are many ways of doing this - I grabbed one of the more concise versions, but there are many to choose from here: How to randomize (shuffle) a JavaScript array?
function shuffle(a, b, c, d) { //array,placeholder,placeholder,placeholder
c = a.length;
while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d;
return a
}
function myFunc() {
let vars = {
txt: ["txt1", "txt2", "txt3"],
test: ["test1", "test2", "test3"],
ran: ["ran1", "ran2", "ran3"]
}
// get the checked values into an array
let flatArr = [];
document.querySelectorAll('[type=checkbox]:checked').forEach(el => {
flatArr = [...flatArr, vars[el.value][Math.floor(Math.random() * vars[el.value].length)]]
});
document.getElementById("tst").innerHTML = shuffle(flatArr).join(" ");
}
<input type="checkbox" value='txt'> txt<br>
<input type="checkbox" value='test'> test<br>
<input type="checkbox" value='ran'> ran
<br>
<br>
<button onclick="myFunc()">One Character</button>
<p id="tst">
sum text lol
</p>

You could use an if clause to determine whether or not the checkbox is checked. Then if it is checked, use the random number as a key to the array, which you can then append to the result.
function myFunc() {
let txt = ["txt1", "txt2", "txt3"];
let test = ["test1", "test2", "test3"];
let ran = ["ran1", "ran2", "ran3"];
let target = document.getElementById('tst');
let result = "";
let txtKey = [Math.floor(Math.random() * txt.length)]
let testKey = [Math.floor(Math.random() * test.length)]
let ranKey = [Math.floor(Math.random() * ran.length)]
if (document.getElementById('txt').checked) {
result = result+txt[txtKey];
}
if (document.getElementById('test').checked) {
result = result+test[testKey];
}
if (document.getElementById('ran').checked) {
result = result+ran[ranKey];
}
target.innerHTML = result;
}
<input id="txt" type="checkbox"> <label for="txt">txt</label><br>
<input id="test" type="checkbox"> <label for="test">test</label><br>
<input id="ran" type="checkbox"> <label for="ran">ran</label>
<br>
<br>
<button onclick="myFunc()">One Character</button>
<p id="tst">
sum text lol
</p>
There are a few things that you could do to make this more elegant, but I think the idea works.

//Object of arrays
let options = {
txt : ["txt1", "txt2", "txt3"],
test : ["test1", "test2", "test3"],
ran : ["ran1", "ran2", "ran3"]
};
function myFunc() {
//Get all checkboxes
let checkedBoxes = document.querySelectorAll('input[type=checkbox]:checked');
//array for texts from arrays
let texts = [];
//loop through selected checkboxes
checkedBoxes.forEach(function(ele) {
// select respective array from object based on checkbox value
let cOpt = options[ele.value];
// random index for texts array - to randomize array text line
let index = Math.floor(Math.random() * checkedBoxes.length);
// to make sure we didn't set a text to that index already
while( texts[index] !== undefined ) {
index = Math.floor(Math.random() * checkedBoxes.length);
}
// set selected array text to a random index in texts array
texts[index] = cOpt[Math.floor(Math.random() * cOpt.length)];
});
// text.join() to covert texts array into string
document.getElementById("tst").innerHTML = texts.join('<br><br>');
}
<input type="checkbox" value="txt"> txt<br>
<input type="checkbox" value="test"> test<br>
<input type="checkbox" value="ran"> ran<br>
<button onclick="myFunc()">One Character</button>
<p id="tst">
sum text lol
</p>
You need to make some adjustments in your approach. i.e set values to checkboxes, create a js obj with all arrays being its property.
Make sure checkboxes values and properties keys are the same.
I have added comments in the code so you can easily understand the purpose of each line.

GTM - tracking latest input click value

My script
function() {
var inputs = document.getElementsByTagName("input"),
selectedRadios = [];
for (var i = 0;i < inputs.length;i++) {
if(inputs[i].type==="checkbox" && inputs[i].checked) {
selectedRadios.push(inputs[i].value);
}
}
return selectedRadios;
}
This script returns an array of all the checked buttons value. So, in my case, if I check three inputs the array will be for example: [167,168,169]
Issue: The array is auto sorted in ascending numerical order, while I want that the array is sorted based on which one was checked first, second, third,... .
To do that I edited the script above in this way
function() {
var inputs = document.getElementsByTagName("input"),
selectedRadios = [],
selectedRadios_latestchoice = [];
// get all checkboxs selected
for (var i = 0;i < inputs.length;i++) {
if(inputs[i].type==="checkbox" && inputs[i].checked) {
selectedRadios.push({filterValue : inputs[i].value, latestchoice : selectedRadios.length});
}
}
// sort value by last choice
selectedRadios.sort(function(a, b) {
return a.latestchoice - b.latestchoice;
}),
// parse data
var obj = JSON.parse(selectedRadios),
for (var s = 0;s < obj.length;s++) {
selectedRadios_latestchoice.push(obj[s].filterValue);
}
// return last value of the array "selectedRadios_latestchoice"
return selectedRadios_latestchoice[selectedRadios_latestchoice.length];
}
The logic is:
push the "input value" and the "array.length",
the "array.length" tell me if the input value was clicked first, second, third ..
sort the input value by the array.length value.
parse the json.
return the latest value of the array.
My attempt return an error. Any help?

There may be a more eligant way to do this, but I was able to use a forEach loop with a nested event listener running a function. In the function we run the event.target through a conditional that checks e.target.checked, if this returns true we push the value into an array, we then reduce that array creating an obj that saves the arr.length as property and the current value as value. Then we push that object into a final array to force the key from auto sorting.
const checkboxes = document.querySelectorAll('.check')
let val = []
const keyValPair = []
checkboxes.forEach((value) => {
value.addEventListener('change', getPositionAndValue)
})
function getPositionAndValue(e) {
if (e.target.checked) {
val.push(e.target.value)
var result = val.reduce(function(result, curr) {
result[val.length] = curr;
return result;
}, {})
keyValPair.push(result)
console.log(keyValPair)
}
}
<input class="check" value="167" type="checkbox">
<input class="check" value="168" type="checkbox">
<input class="check" value="169" type="checkbox">
<input class="check" value="170" type="checkbox">
<input class="check" value="171" type="checkbox">

How to Push only one object and update it into Array using JavaScript?

I am creating simple App using Vanilla JavaScript, I have some issue, Let's explain my problem,In the beginning i have empty array, I want to push some values from Input field, and it's works fine, but i want to push only one object into arrOfObj:[], that means i want replace old value by new value, without changing the length.
var arrOfObj = [];
function pushObject() {
var inputVal = document.getElementById('mainInput').value;
arrOfObj.push({ id: 1, value: inputVal });
console.log(arrOfObj);
}
<button onclick="pushObject()">click</button>
<input type="text" id="mainInput">

I think instead of using push, you can directly replace the first index with your new object
var arrOfObj = [];
function pushObject(){
var inputVal = document.getElementById('mainInput').value
//replace the first value of array
arrOfObj[0] = {'id':1, 'value':inputVal};
console.log(arrOfObj)
}
<button onclick="pushObject()">click</button>
<input type="text" id="mainInput">

You can achieve this by simply updating the 0th element of your array if there is one.
var arrOfObj = [];
function pushObject(){
var inputVal = document.getElementById('mainInput').value
if (arrOfObj[0]) {
arrOfObj[0].value = inputVal
} else {
arrOfObj.push({'id':1, 'value':inputVal})
}
console.log(arrOfObj)
}
<button onclick="pushObject()">click</button>
<input type="text" id="mainInput">

How to get a list of html input values parsed to integers from a for loop?

I am new to JavaScript & writing a program that takes a collection of HTML
input values and returning the sum.
I want to convert the data-type of the value from string to integer with a for loop, but am having issues.
for (i = 0; i < allInp.length; ++i) {
var integer = [parseInt(allInp[i].value, 10)];
console.log(integer[i]);
}
// should return something like "3, 4, 5"
I expect the values of allInp to be returned as integers but returns them as strings.

Create the array outside the loop and use push():
let allInp = document.querySelectorAll("input");
var arr = [];
for (i = 0; i < allInp.length; ++i) {
arr.push(parseInt(allInp[i].value, 10));
}
console.log(arr);
<input type="text" value="2" />
<input type="text" value="1" />
<input type="text" value="7" />

Jquery push separate arrays to one array.

I have this piece of code, that checks every checkbox that have been checked. I try to count the times the checkboxes is check.
Example if box 1 and 2 is checked it should parse the values to one array like ["1","2"]. But instead it keeps counting the array like ["1"], ["2"]. Even then try to push the count into the array it does not work. This information i got from Chrome developer tool.
I tried to push it to the array like this:
var count = document.querySelectorAll('input[name="check"]:checked').length;
var arr = [];
arr.push(count);
Maybe it is easier too understand if you guys see my code. Here goes!
This function checks for change in the checkboxes, if they are checked
or not.
function chBox()
{
$("#allCheckboxes").on("change", "input[name=check]", function() {
var array;
if ($(this).is(':checked')) {
var count = document.querySelectorAll('input[name="check"]:checked').length;
var arr = [];
arr.push(count);
document.getElementById("toppings").innerHTML = count;
console.log(arr);
//alert($(this).val());
// alert(document.querySelectorAll('input[name="check"]:checked').length);
//document.getElementById("pieCrust").innerHTML = $(this).val();
}
else {
alert("not checked");
}
});
}
These to input with the name attribute "check", if the one I need to
push one one array instead of multiple arrays.
<!--Pepperoni-->
<input class="form-check-input " name="check" type="checkbox" id="Pepperoni" value="Pepperoni">
<label class="form-check-label " for="Pepperoni">Pepperoni</label>
<!--Sausage-->
<input class="form-check-input chk" name="check" type="checkbox" id="Sausage" value="Sausage">
<label class="form-check-label" for="Sausage">Sausage</label>

You need to declare your array arr outside of $("#allCheckboxes").on(...)
Probably you're confused with your extra Array array, this extra variable is unused in your code.
function chBox() {
$("#allCheckboxes").on("change", "input[name=check]", function() {
var arr = []; // This is the place where you to declare your array.
if ($(this).is(':checked')) {
var count = document.querySelectorAll('input[name="check"]:checked').length;
arr.push(count);
document.getElementById("toppings").innerHTML = count;
console.log(arr);
} else {
alert("not checked");
}
});
}