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");
}
});
}
Related
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.
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">
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">
I'm trying to use jQuery to create the below sample array I want to output:
[["foo0","foo1"],["foo2","foo3","foo4"],["foo5"]]
Code I'm trying to use:
var counter = 0;
var arr = [];
$('.unknown-number-of-elements').each(function(){
var keyNumber = $(this).val();
var valToPush = "foo"+counter;
if(keyNumber in arr){
arr[keyNumber].push(["'"+ valToPush +"'"]);
}else{
arr[keyNumber] = valToPush;
}
counter++;
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="unknown-number-of-elements" value="1">
<input class="unknown-number-of-elements" value="2">
<input class="unknown-number-of-elements" value="3">
<input class="unknown-number-of-elements" value="4">
<input class="unknown-number-of-elements" value="5">
The code above is giving the following error:
Uncaught TypeError: arr[keyNumber].push is not a function
Basically if the array key already exists I would like to create a sub array and add values to that sub array.
You never create the subarrays, you only put valToPush into the one array.
Do: arr[keyNumber] = [ valToPush ];, creating an array which contains your first value.
Or:
if ( !arr[ keyNumber ] ) {
arr[ keyNumber ] = [];
}
arr[ keyNumber ].push( valToPush );
Let's say I've got a form with several inputs, and I use a pretty standard jQuery statement to get them all:
var inputs = $("#some-form").find("input")
Now, I'd like to act on those inputs, but let's say I want to treat the radio button and/or checkbox groups as a single thing. How can I split inputs out into elements grouped by an attribute, say name. Note, that I don't know what the name is going to be when the processing starts.
In human terms, I need the logic do do something along the lines of:
Let me iterate over the list of inputs. For each input, let me check
to see if it's already been added to a placeholder array. If so,
leave it alone. If not, add it and everything with it's name to said
placeholder array (as a sub array).
Essentially, I'd like something like this:
[[<input type="text" name="name1">], [<input type="radio" name="name2">,<input type="radio" name="name2">]]
Try using attribute selector inside a filter.
var $formInput = $('#some-form').find('input');
var inputText = $formInput.filter('[type=text]')
var otherInput = $formInput.filter("[type=radio]")
.add($formInput.filter('[type=checkbox]'));
or even better
var otherInput = $formInput.filter(function () {
return this.type == 'radio' || this.type == 'checkbox';
});
DEMO: http://jsfiddle.net/utwaf/
How can I split inputs out into elements grouped by an attribute, say name
var elements = []; //elements by name
var $formInput = $('#some-form').find('input');
elements.push($formInput.filter(function() {
return this.name == 'name1';
});
elements.push($formInput.filter(function() {
return this.name == 'name2';
});
Note: All elements pushed into the array are jQuery objects.
function getInputsPartitioned(formEl) {
var inputEls = formEl.querySelectorAll("input");
var inputsByName = Object.create(null);
for (var i = 0; i < inputEls.length; ++i) {
var inputEl = inputEls[i];
var name = inputEl.name;
if (!(name in inputsByName)) {
inputsByName[name] = [];
}
inputsByName[name].push(inputEl);
}
// `inputsByName` now looks like this:
// {
// name1: [<input type="text" name="name1">],
// name2: [<input type="radio" name="name2">, <input type="radio" name="name2">]
// }
// To get it into arrays:
return Object.keys(inputsByName).map(function (name) {
return inputsByName[name];
});
}
Bonus: no jQuery needed.