We Keep Coding

Creating an onClick event

I'm very new to coding so let me say sorry if anything is unclear or if my existing code is confusing for you.
I have a website that let people search for restaurants using checkboxes, built with Wix. The way the code is set up right now, as soon as the user clicks on an alternative (let's say the check city "New York") the page updates immediately.
What I want is a Search Button that triggers the filtering event so to speak. So that when they check "New York" nothing happens until they click "Search".
Here's the code:
$w.onReady(function() {
});
//Restaurant filter
export function filterPlaces() {
let city = [];
let type = [];
let vibe = [];
let sunshine = [];
// Get the indexes of all the checkboxes checked in that group
let cityOptions = $w("#cityGroupBox").selectedIndices
let typeOptions = $w('#typeGroupBox').selectedIndices
let vibeOptions = $w('#vibeGroupBox').selectedIndices
let sunshineOptions = $w('#sunshineGroupBox').selectedIndices
let filter = wixData.filter();
// Next, loop through the checked items and add each field to the array and apply filter
if (cityOptions.length > 0) {
for (var i = 0; i < cityOptions.length; i++) {
city.push($w('#cityGroupBox').options[cityOptions[i]].value);
}
}
if (city.length > 0) {
filter = filter.hasSome("stad", city); //The "city" is a reference to the FiledKey in the database
}
if (typeOptions.length > 0) {
for (var i2 = 0; i2 < typeOptions.length; i2++) {
type.push($w('#typeGroupBox').options[typeOptions[i2]].value);
}
}
if (type.length > 0) {
filter = filter.hasSome("typ", type);
}
if (vibeOptions.length > 0) {
for (var i3 = 0; i3 < vibeOptions.length; i3++) {
vibe.push($w('#vibeGroupBox').options[vibeOptions[i3]].value);
}
}
if (vibe.length > 0) {
filter = filter.hasSome("bstFr", vibe);
}
if (sunshineOptions.length > 0) {
for (var i4 = 0; i4 < sunshineOptions.length; i4++) {
sunshine.push($w('#sunshineGroupBox').options[sunshineOptions[i4]].value);
}
}
if (sunshine.length > 0) {
filter = filter.hasSome("soltagg", sunshine);
}
$w("#dataset1").setFilter(filter)
.then(() => {
console.log("count after", $w("#dataset1").getTotalCount());
})
.catch((err) => {
console.log(err);
});
$w('#resetButton').onClick(function() {
$w('#cityGroupBox').value = undefined
$w('#typeGroupBox').value = undefined
$w('#vibeGroupBox').value = undefined
$w('#sunshineGroupBox').value = undefined
$w('#dataset1').setFilter(wixData.filter())
});
}
Any ideas on where and how to implement this onClick event?
I really appreciate any help you can provide.

Get index of array is not working

I am learning Vue and I am trying to access a string in an array by it's index, but I always get an error when trying to read the string. Here's my code:
var vm = new Vue({
el: '#top',
data: {
Cars: [],
DefaultCarList: [],
AddedCars: [],
SelectedCar: ''
},
methods: {
addCar: function(car) {
var addedCarCount = this.AddedCars.length;
var defaultCarCount = this.DefaultCarList.length;
var containsCar = function () {
for (var i = 0; i < addedCarCount; i++)
{
if (this.AddedCars[i] === car) // error here
{
return true;
}
}
return false;
}
var carIsValid = function() {
for(var i = 0; i < defaultCarCount; i++)
{
if(this.DefaultCarList[i] === this.SelectedCar) // error here
{
return true;
}
}
return false;
}
if (containsCar() === false && carIsValid){
this.AddedCars.push(car);
}
}
}
})
HTML:
<label for="carsId">Cars</label>
<select id="carsId" name="cars" v-model="SelectedCar">
<option disabled value="">Select</option>
<option v-for="car in DefaultCarList" :value="flavor">{{car}}</option>
</select>
<div>
<button type="button" class="hollow button success small"
v-on:click="addCar(SelectedCar)">Add Flavor</button>
</div>
Is it valid to iterate over an array like this in Vue and access the property by it's index? What is the correct way to do this?

Problem is with 'this' keyword it uses inner this where it doesn't have DefaultCarList variable, should use () => {} syntax .Error in this code
var carIsValid = function() {
for(var i = 0; i < defaultCarCount; i++)
{
if(this.DefaultCarList[i] === this.SelectedCar) // error here
{
return true;
}
}
return false;
}
should be
var carIsValid = () => {
for(var i = 0; i < defaultCarCount; i++)
{
if(this.DefaultCarList[i] === this.SelectedCar) // error here
{
return true;
}
}
return false;
}
and
var containsCar = () => {
for (var i = 0; i < addedCarCount; i++)
{
if (this.AddedCars[i] === car) // error here
{
return true;
}
}
return false;
}

The problem is that this it's not a reference to your model.
In your example this is a reference to window object.
Have a look here in order to understand the scope of this keyword in javascript.
You should use arrow functions.
var containsCar = () => {
for (var i = 0; i < addedCarCount; i++)
{
if (this.AddedCars[i] === car) // error here
{
return true;
}
}
return false;
}
or you could just define a self variable.
var self=this;
var containsCar = function() {
for (var i = 0; i < addedCarCount; i++)
{
if (self.AddedCars[i] === car) // error here
{
return true;
}
}
return false;
}
Further more, I recommand you to use native javascript functions in order to have a clean code.
var containsCar = function () {
for (var i = 0; i < addedCarCount; i++)
{
if (this.AddedCars[i] === car) // error here
{
return true;
}
}
return false;
}
var carIsValid = function() {
for(var i = 0; i < defaultCarCount; i++)
{
if(this.DefaultCarList[i] === this.SelectedCar) // error here
{
return true;
}
}
return false;
}
can be achieved using some method :
The some() method tests whether at-least one element in the array
passes the test implemented by the provided function.
var containsCar = () => {
return this.AddedCars.some(a=>a==car);
}
var carIsValid = () => {
return this.DefaultCarList.some(a=>a === this.SelectedCar);
}

JavaScript remove an IIFE event listener

I'm trying to remove click events from a list of id's after adding them with an IIFE like this
function setupPlayer(player){
var squareState = {};
for (i = 0; i < allSquares.length; i++) {
if(allSquares[i].innerHTML === "") {
// set up a click event for each square
document.getElementById(allSquares[i].getAttribute('id')).addEventListener('click', (clickSquare)(i));
}
}
}
The clickSquare function returns
function clickSquare(i){
var num = i;
return function() {
document.getElementById(allSquares[num].getAttribute('id')).innerHTML=player;
}
}
Then I try to remove them with
function removeClickEvents(){
for (let i = 0; i < allSquares.length; i++) {
document.getElementById(allSquares[i].getAttribute('id')).removeEventListener('click', clickSquare);
}
}
I've tried naming the returned anonymous function and using removeEventListener on that to no avail.

To remove event listener from a DOM element you need to pass the same function you used while adding event listener, as the parameter.
In javascript when you create an object it creates a new instance of that object class, so it won't be equal to another object even if it is created with same parameters
Example:
{} != {} // returns true
[] != [] // returns true
Same goes with function, whenever you write function (){} it creates a new instance of Function class.
Example:
function a() {
return function b() {}
}
a() != a() // returns true
Solution:
So for you to be able to remove the event listeners, you will have to store the functions you have passed to addEventListener
var listeners = [];
function setupPlayer(player) {
var squareState = {};
for (i = 0; i < allSquares.length; i++) {
if(allSquares[i].innerHTML === "") {
listeners[i] = clickSquare(i);
document.getElementById(allSquares[i].getAttribute('id')).addEventListener('click', listeners[i]);
}
}
}
function clickSquare(i) {
var num = i;
return function() {
document.getElementById(allSquares[num].getAttribute('id')).innerHTML=player;
}
}
function removeClickEvents() {
for (let i = 0; i < allSquares.length; i++) {
if(listeners[i]) {
document.getElementById(allSquares[i].getAttribute('id')).removeEventListener('click', listeners[i]);
}
}
}
From your code where you are using
document.getElementById(allSquares[i].getAttribute('id'))
I am assuming that allSquares[i] is a DOM element already, your code can be more simplified
var listeners = [];
function setupPlayer(player) {
var squareState = {};
for (i = 0; i < allSquares.length; i++) {
if(allSquares[i].innerHTML === "") {
listeners[i] = clickSquare(i);
allSquares[i].addEventListener('click', listeners[i]);
}
}
}
function clickSquare(i) {
var num = i;
return function() {
allSquares[num].innerHTML=player;
}
}
function removeClickEvents() {
for (let i = 0; i < allSquares.length; i++) {
if(listeners[i]) {
allSquares[i].removeEventListener('click', listeners[i]);
}
}
}

The function is being called immediately at (clickSquare)(i). At code at Question allSquares appears to be the element itself, clickSquare function can be referenced directly and event.target can be used within event handler to reference the current element in allSquares collection
let player = 123;
setInterval(() => player = Math.random(), 1000);
onload = () => {
let allSquares = document.querySelectorAll("div[id|=square]");
let button = document.querySelector("button");
button.onclick = removeClickEvents;
function setupPlayer(player) {
var squareState = {};
for (let i = 0; i < allSquares.length; i++) {
if (allSquares[i].innerHTML === "click") {
// set up a click event for each square
allSquares[i].addEventListener('click', clickSquare);
}
}
}
function clickSquare(event) {
console.log(event.target);
event.target.innerHTML = player;
}
function removeClickEvents() {
for (let i = 0; i < allSquares.length; i++) {
allSquares[i].removeEventListener('click', clickSquare);
}
}
setupPlayer(player);
}
<div id="square-0">click</div>
<div id="square-1">click</div>
<div id="square-2">click</div>
<button>remove events</button>

How do i get the specific values from json data in React

I am getting an error in console while i am trying to get a specific value from json data. This is the error:
'Uncaught TypeError: Cannot read property 'processen_id' of undefined'
Here is my code:
$.get("/getProces", function (data) {
if (data.error) {
} else {
for (var i = 0; i <= data.message.length; i++) {
var obj = data.message[i]
console.log(obj.processen_id)
}
}
})
}
This is what i get when i log (data):

You have a mistake in your code in the for loop
<= instead of <
$.get("/getProces", function (data) {
if (data.error) {
} else {
for (var i = 0; i < data.message.length; i++) {
var obj = data.message[i]
console.log(obj.processen_id)
}
}
})
}

The error message means that obj is undefined. That means, that data.message[i] gets an undefined value. The problem is the loop. You get an i that is larger then the array. Change <= to <:
for (var i = 0; i < data.message.length; i++) {
var obj = data.message[i]
console.log(obj.processen_id)
}

index out of range: for (var i = 0; i <= data.message.length; i++) { should be for (var i = 0; i < data.message.length; i++) { instead.
you can also optimize your code in this way:
$
.get("/getProces")
.then((res) => res.error ? Promise.reject(res) : Promise.resolve(res))
.then((data) => {
for (var i = 0; i < data.message.length; i++) {
var obj = data.message[i]
console.log(obj.processen_id)
}
})

javaScript:passing argument to eventListener

i'm try to make something and i made this piece of code,but when i press the botton it's happend for a sec and then disappear,am i donig passing the arguments wrong or something?
here the code is:
{
var fil1;
var rtextDiv;
for (var i = 0; i < dmsg.getElementsByClassName('refilter').length; i++) {
var refilterInput = dmsg.getElementsByClassName('refilter')[i];
refilterInput.addEventListener('keyup', firstfilter(rtextDiv, fil1,refilterInput));
}
};
function firstfilter(e, rtextDiv, fil1, refilterInput) {
rtextDiv = refilterInput.parentNode.parentNode.getElementsByClassName('rtext')[0];
while (rtextDiv.firstChild) {
rtextDiv.removeChild(rtextDiv.firstChild);
}
fil1 = filteredPropertiesTable(res, refilterInput.value);
rtextDiv.appendChild(fil1);
};
edited as the comment said:
{
var fil1;
var rtextDiv;
for (var i = 0; i < dmsg.getElementsByClassName('refilter').length; i++) {
var refilterInput = dmsg.getElementsByClassName('refilter')[i];
refilterInput.addEventListener('keyup', function()
{firstfilter(rtextDiv,fil1,refilterInput)(rtextDiv, fil1,refilterInput)});
);
}
};
function firstfilter(e, rtextDiv, fil1, refilterInput) {
rtextDiv = refilterInput.parentNode.parentNode.getElementsByClassName('rtext')[0];
while (rtextDiv.firstChild) {
rtextDiv.removeChild(rtextDiv.firstChild);
}
fil1 = filteredPropertiesTable(res, refilterInput.value);
rtextDiv.appendChild(fil1);
};
is it true know?can i pass argument that way?

Here you are actually executing the handler:
refilterInput.addEventListener('keyup', firstfilter(rtextDiv, fil1,refilterInput));
You should just present the handler name:
refilterInput.addEventListener('keyup', firstfilter);
And the handler can be improved:
function firstfilter(e) {
var rtextDiv = this.parentNode.parentNode.getElementsByClassName('rtext')[0];
while (rtextDiv.firstChild) {
rtextDiv.removeChild(rtextDiv.firstChild);
}
var fil1 = filteredPropertiesTable(res, this.value); // you didn't say what is res
rtextDiv.appendChild(fil1);
};