var boxes = document.getElementsByName('toggle');
function markPreceding() {
var curIndex = null;
for (var j = 0; j < boxes.length; j++) {
if (boxes[j].checked) {
curIndex = j;
}
}
}
function checkInputs() {
for (var k = 0; k <= curIndex.length; k++) {
boxes[k].checked = true;
}
}
for (var i = 0; i <= boxes.length; i++) {
boxes[i].onchange = markPreceding;
boxes[i].onchange = checkInputs;
}
<input type="checkbox" id="product-1" name="toggle">
<input type="checkbox" id="product-2" name="toggle">
<input type="checkbox" id="product-3" name="toggle">
<input type="checkbox" id="product-4" name="toggle">
<input type="checkbox" id="product-5" name="toggle">
Have a problem passing this "curIndex" value to checkInputs function.
This should check inputs before checked input and get its value to do it.
Only ES5 synthax needed for this project.
EDIT: The ES5 Syntax way
const boxes = document.getElementsByName('toggle');
boxes.forEach(function(box, I) {
box.onclick = function(e) {
markPreceding(i);
};
});
function markPreceding(i) {
for (var j = 0; j < boxes.length; j++) {
if(j <= i) {
document.getElementById('product-' + (j + 1)).checked = true;
} else {
document.getElementById('product-' + (j + 1)).checked = false;
}
}
}
ORIGINAL:
Try using this:
const boxes = document.getElementsByName('toggle');
boxes.forEach((box, i) => {
box.onclick = (e) => {
markPreceding(i);
};
});
function markPreceding(i) {
for (var j = 0; j < boxes.length; j++) {
if(j <= i) {
document.getElementById(`product-${j + 1}`).checked = true;
} else {
document.getElementById(`product-${j + 1}`).checked = false;
}
}
}
For some reason, there seems to be an issue with updating the inputs through the NodeList array returned by document.getElementsByName. Not sure why, but this code has been verified. See working example here.
Related
function deleteParentNodeOnClick() {
for (var i = 0; i < deleteButton.length; i++) {
deleteButton[i].addEventListener("click", deleteNodeOnClick);
}
}
function deleteNodeOnClick(e) {
var trash = document.querySelectorAll("i");
for (var ind = 0; ind < trash.length; ind++) {
console.log(e);
this.parentNode.parentNode.remove();
}
}
How to rewrite this code from jQuery to vanilla JavaScript? I need to see how many checkboxes are checked. The problem is I do not know how to remove unchecked checkboxes from the total score.
$(function () {
var countChecked = function () {
var n = $("input:checked").length;
$(".output").text(n);
};
countChecked();
$("input[type=checkbox]").on("click", countChecked);
});
What should I do next?
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
var great = 0;
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
function countIt() {
for (var i = 0; i < box.length; i++) {
if ( box[i].checked ) {
great++
par.innerHTML = great;
return
}
}
}
}
You need to reset the great variable each time you count (for example by moving it inside the countIt function).
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
function countIt() {
var great = 0;
for (var i = 0; i < box.length; i++) {
if (box[i].checked) {
great++;
}
}
par.innerHTML = great;
}
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
}
You can also move the countIt function definition out of the loop and the same with innerHTML setting.
So, I'm new to javascript.
My code is the following, it is based on a xaml file with a canvas and a couple of borders in it:
var defaultPage = null;
var aantalKliks;
var correcteBorders;
var incorrecteBorders;
var geenAntwBorders;
function onLoaded() {
defaultPage = document.getElementById('DefaultPage');
alert('In onloaded van Default.xaml.');
aantalKliks = 0;
aantalBorderKliks = 0;
correcteBorders = new Array();
for (var i = 0; i < 3; i++) {
correcteBorders[i] = defaultPage.content.findName('CorrecteBorder' + i);
}
incorrecteBorders = new Array();
for (var i = 0; i < 3; i++) {
incorrecteBorders[i] = defaultPage.content.findName('IncorrecteBorder' + i);
}
geenAntwBorders = new Array();
for (var i = 0; i < 3; i++) {
geenAntwBorders[i] = defaultPage.content.findName('GeenAntwBorder' + i);
}
}
function OnCanvasClicked() {
if (aantalKliks == 2) {
aantalKliks = 0;
}
if (aantalKliks == 0) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Visible';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Visible';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Visible';
}
} else if (aantalKliks == 1) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Collapsed';
}
aantalKliks++;
}
function borderClicked(sender) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Collapsed';
}
sender['Visibility'] = 'Visible';
}
The function OnCanvasClicked is triggered when I click anywhere in the canvas and makes all borders disappear/reappear. The function borderClicked is triggered when I click a specific border. The function borderClicked does trigger when I click a specific border, however the OnCanvasClicked function also gets executed right after, which causes an unwanted result.I think I need some way to ignore the OnCanvasClicked function if I click on a border, I did google this but to be honest I didn't really understand what they meant in most of the solutions, so I was hoping someone could explain it to me in a simple way what I need to do (and what I'm doing).
You need to set event.stopPropagation() when borderClicked function is fire
Try this which will prevent Javascript to further execution
event.preventDefault()
#Harshit is correct
You need to set event.stopPropagation() when borderClicked function is fire
I just wanted to add this link/sample which I found very usefull to understand bubbling
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/ie9_event_phases.htm
see the code.
Thanks for the help everyone. Much appreciated for the valuable feedback. But it haven't helped. I really thank you.
$.get("http://nominatim.openstreetmap.org/search?q=pekin,+china&format=json&polygon=1&addressdetails=1").done(function(data)
{
var aJsonData = new Array();
var iBiggest = 0;
aJsonData = JSON.parse(data);
aData = aJsonData;
for(var i=0; i < aData.length; i++)
{
if(i != 0)
{
if((aData[i].polygonpoints.length) > (aData[iBiggest].polygonpoints.length))
{
iBiggest = i;
}
}
}
alert(iBiggest);
for(var j=0; j < aData[iBiggest].polygonpoints.length; j++)
{
//alert(aData[iBiggest].polygonpoints[j]);
}
});
Your for loop is wrong, the array index will start from 0 to length - 1 so i <= aData.length is wrong.
So the loop should be
$
.get("http://nominatim.openstreetmap.org/search?q=london,+england&format=json&polygon=1&addressdetails=1")
.done(function(data) {
var iBiggest = 0;
for (var i = 1; i < data.length; i++) {
if ((data[i].polygonpoints.length) > (data[iBiggest].polygonpoints.length)) {
iBiggest = i;
}
}
// this is not working
alert(iBiggest);
for (var j = 0; j < data[iBiggest].polygonpoints.length; j++) {
// alert(aData[iBiggest].polygonpoints[j]);
}
}, 'json');
Demo: Fiddle
I solved it.
$.getJSON("http://nominatim.openstreetmap.org/search?q=pekin,+china&format=json&polygon=1&addressdetails=1", function(data)
{
var iBiggest = 0;
for(var i = 1; i < data.length; i++)
{
if(data[i].polygonpoints != 'undefined' && data[i].polygonpoints)
{
if((data[i].polygonpoints.length) > (data[iBiggest].polygonpoints.length))
{
iBiggest = i;
}
}
}
alert(iBiggest);
for(var j = 0; j < data[iBiggest].polygonpoints.length; j++)
{
alert(data[iBiggest].polygonpoints[j]);
}
});
I have code to see if any checkboxes are checked, it's working. Here's where I'm usure, after it sees that none are checked, checked I want to have a DIV show up (hide/show I guess) somwhere and disappear if any of the boxes are checked.
function checkBoxValidate(cb) {
for (j = 0; j < 8; j++) {
if (eval("document.myform.checkbox[" + j + "].checked") = false) {
document.views.checkbox[j].checked = false;
}
}
}
----------
<form name="myform">
<input class="checkbox" name="1" type="checkbox" value="check_1" onclick="document.getElementById('r-click').innerHTML = '1;" id="click">
1
<input class="checkbox" name="2" type="checkbox" value="check_2" onclick="document.getElementById('s-click').innerHTML = '2';" id="click">
2
</form>
<div id=showInstructions>Check boxes</div>
Thanks!
Added a few lines of code to your original code to demonstrate:
(btw, the whole "eval" thing is kinda messy and could be written much simpler...)
function checkBoxValidate(cb) {
var somethingIsChecked = false;
for (j = 0; j < 8; j++) {
if (eval("document.myform.checkbox[" + j + "].checked") = false) {
document.views.checkbox[j].checked = false;
}
else {
somethingIsChecked = true;
}
if (somethingIsChecked)
document.getElementById("showInstructions").style.display = "block";
else
document.getElementById("showInstructions").style.display = "none";
function checkBoxValidate(cb) {
var noneChecked = true;
for (j = 0; j < 8; j++) {
if (eval("document.myform.checkbox[" + j + "].checked") == false) {
document.views.checkbox[j].checked = false;
} else {
noneChecked = false;
}
}
document.getElementById("showInstructions").style.display = noneChecked ? "block" : "none";
}