Category: javascript

I am trying to disable the full-day radio button when the shared radio button is selected and I want the color to be changed to disable radio button which can be seen below.

label[for=full-day] {
    position: relative;
    color: orangered;
    font-size: 24px;
    border: 2px solid orangered;
    border-radius: 5px;
    align-items: center;
    display: flex;
    cursor: pointer;
    height: 36px;
    width: 116px;
    margin: 20px 20px 0px 0px;
    justify-content: center;
    
}
input[type="radio"] {
    display: none;
}

label[for=private] {
    position: relative;
    color: orangered;
    font-size: 24px;
    border: 2px solid orangered;
    border-radius: 5px;
    align-items: center;
    display: flex;
    cursor: pointer;
    height: 36px;
    width: 80px;
    margin: 20px 20px 0px 0px;
    justify-content: center;
}

label[for=shared] {
    position: relative;
    color: orangered;
    font-size: 24px;
    border: 2px solid orangered;
    border-radius: 5px;
    align-items: center;
    display: flex;
    cursor: pointer;
    height: 36px;
    width: 80px;
    margin: 20px 20px 0px 35px;
    justify-content: center;
}
label[for=half-day] {
    position: relative;
    color: orangered;
    font-size: 24px;
    border: 2px solid orangered;
    border-radius: 5px;
    align-items: center;
    display: flex;
    cursor: pointer;
    height: 36px;
    width: 150px;
    margin: 20px 20px 0px 0px;
    justify-content: center;
}

input[type="radio"]:checked+label {
    background-color: orangered;
    color: white;
}

input[type="radio"]:checked+label:before {
    height: 16px;
    width: 16px;
    border: 10px solid white;
    background-color: orangered;
}

label[for=full-day-disabled]{
    color: #666666;
    border: 2px solid  #666666;
    position: relative;
    font-size: 24px;
    border-radius: 5px;
    align-items: center;
    display: flex;
    cursor: not-allowed;
    height: 36px;
    width: 80px;
    margin: 20px 20px 0px 35px;
    justify-content: center;
}

<div style="display: flex; width: 100%">
  <input type="radio" name="occupancy" id="private" value="private" checked="checked">
  <label for="private">Private</label>
  <input type="radio" name="occupancy" id="shared" value="shared">
  <label for="shared">Shared</label>
</div>
<div style="display: flex; width:100%">
  <input type="radio" name="package" id="full-day" checked="checked">
  <label for="full-day">Full Day</label>
  <input type="radio" name="package" id="half-day">
  <label for="half-day">Half Day</label>
</div>

<div style="display: flex; width:100%">
  <input type="radio" name="package" id="full-day">
  <label for="full-day-disabled">disabled</label>
</div>

I am trying to disable the full-day radio button when the shared radio button is selected and I want the color to be changed to disable radio button which can be seen below.

I’m trying to map and filter a JSON inside a component but I have not succeeded, from the service “data.services.ts” I had no problem, but when taking the data to the component “tab1.page.ts” I couldn’t, the usual thing I do is use:

.pipe(
    map((res: any) => {
        return res
    })
);

Tab1.page.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data.services';

import { map } from "rxjs/operators";
import { filter } from "rxjs/operators";

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {

  items = []

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
      this.dataService.getRemoteData().subscribe(date=> {
        this.items = date
      })
  }

}

data.services.ts

import { Injectable, Input } from "@angular/core";
import { HttpClient } from "@angular/common/http";

import { map } from "rxjs/operators";
import { filter } from "rxjs/operators";

@Injectable({
    providedIn: "root"
})
export class DataService {

    constructor(private http: HttpClient) {}

    getRemoteData() {
        return this.http
        .get("https://api")
        .pipe(
            map((res: any) => {
                return res.prosugApi
            })
        );
    }
}

I have a list of 20 times, most of the items are just 1 or 2 sentences with some being pictures.

I made them into a flex horizontal list with the intention of creating horizontal transition list.

This massively slowed down the APP.

I know that it is the number of items that is slowing down the APP because when I reduce the list to 3 items, it sped back up.

I have a Xion multi core computer. It can’t be the hardware.

What could be the reason?

I am trying to put this JSON data into my html table using datatables jQuery plugin.

{
"status":{"1":"Debit","2":"Debit","3":"Debit","4":"Debit","5":"Debit","6":"Debit","7":"Debit"},
"funds code":{"1":"None","2":"None","3":"None","4":"None","5":"None","6":"None","7":"None"},
"amount":{"1":"-298.01 USD","2":"-4930 USD","3":"-8334 USD","4":"-366.18 USD","5":"-6.39 
            USD","6":"-5 USD","7":"-0.80 USD"},
"id":{"1":"NTRF","2":"NTRF","3":"NTRF","4":"NTRF","5":"NTRF","6":"NTRF","7":"NTRF"},
"customer reference": 
   {"1":434433,"2":434661,"3":434796,"4":435273,"5":435506,"6":435688,"7":435688},
"bank reference":{"1":"None","2":"None","3":"None","4":"None","5":"None","6":"None","7":"None"},
"extra details":{"1":"","2":"","3":"","4":"","5":"","6":"","7":""},
"currency":{"1":"USD","2":"USD","3":"USD","4":"USD","5":"USD","6":"USD","7":"USD"},
"date": 
{"1":1625270400000,"2":1625270400000,"3":1625270400000,"4":1625270400000,"5":1625270400000,"6":1625270400000,"7":1625270400000},

"entry date":{"1":"2021-07-03","2":"2021-07-03","3":"2021-07-03","4":"2021-07-03","5":"2021-07- 
               03","6":"2021-07-03","7":"2021-07-03"},
"guessed entry date":{"1":"2021-07-03","2":"2021-07-03","3":"2021-07-03","4":"2021-07- 
                       03","5":"2021-07-03","6":"2021-07-03","7":"2021-07-03"},
}

This is what I’ve written in my main.js file and I think there is an error with how I have defined my columns. Any clue to what the error might be?

    $(document).ready( function () {
    $('#example').DataTable({
        'ajax': './desired_forms/mt_in_json_form.json'
        'columns': [
          {"status"},
          {"funds code"},
          {"amount"},
          {"id"},
          {"customer reference"},
          {"bank reference"},
          {"extra details"},
          {"currency"},
          {"date"},
          {"entry date"},
          {"guessed entry date"}
        ]
    });
} );

I have an array of country objects (countries) and I’m trying to get just an array of the String names, so from this example:

Just: ['Canada', 'USA', ..] etc.

I’m trying to do this with

const getNames = (countries) => countries.map(({ Name }) => Name); 

but I can’t seem to get it. Any suggestions?

Is the following a correct classification of the different (main) value types in Javascript?

'use strict';
let
    a = undefined,
    b = false,      
    c = 'hello',
    d = 2.42,
    e = 4,
    f = BigInt(272),
    g = Symbol('a'),
    h = function() {return 'hi'},
    i = null,
    j = /123/,
    k = [1,2,3],
    l = {1: 2};

console.log(`
    // Undefined
    a. ${a} --> ${typeof a}

    // Primitives
    b. ${b} --> ${typeof b}
    c. ${c} --> ${typeof c}
    d. ${d} --> ${typeof d}
    e. ${e} --> ${typeof e}

    // New Primitives
    f. ${f} --> ${typeof f}
    g. ${g.toString()} --> ${typeof g}

    // Function
    h. ${h} --> ${typeof h}

    // Object (everything else)
    i. ${i} --> ${typeof i}
    j. ${j} --> ${typeof j}
    k. ${k} --> ${typeof k}
    k. ${l} --> ${typeof l}
`);

Additionally, it seems very odd to me that the value undefined has type undefined, but then the value null has the type object — why does the language define it like that?

I have created custom icons. If I try to use the icons in App.js it works fine. I want to use them in my other files. What is the proper way of doing it?

import { createIconSetFromIcoMoon } from "@expo/vector-icons";

const Icon = createIconSetFromIcoMoon(
  require("./components/SVGComponents/selection.json"),
  "IcoMoon",
  "icomoon.ttf"
);

const fetchFonts = () => {
  return Font.loadAsync({
    ...

    //icons font
    IcoMoon: require("./components/SVGComponents/icomoon.ttf"),
  });
};


export default function App() {
  const [isFontLoaded, setIsFontLoaded] = useState(false);
  if (!isFontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setIsFontLoaded(true)}
        }
      />
    );
  }
...
}

I tried creating an Icon component, importing it in the App.js file and then using it in other component of mine but I am getting the following errors :

Warning: React.jsx: type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

AppLoading threw an unexpected error when loading:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

//Icon.js
import { createIconSetFromIcoMoon } from "@expo/vector-icons";


const fetchFonts = () => {
  return Font.loadAsync({
   ...

    //icons font
    IcoMoon: require("./components/SVGComponents/icomoon.ttf"),
  });
};

export default Icon = createIconSetFromIcoMoon(
  require("./components/SVGComponents/selection.json"),
  "IcoMoon",
  "icomoon.ttf"
);

//in App.js
import Icon from "./components/SVGComponents/Icon";

Also tried with export const Icon and import {Icon} , got the same error

in the component i want to use icons:

<Icon name="Back" color="green" size={44}></Icon>

What did the job – exporting Icon from App.js and importing it in the component I want to use it like that:

import { Icon } from "../../App";

but I am not sure it’s a good idea to use it this way. How would you suggest I use it?

I Have the following JSON object

{
 "analyticsMaterials": [
{
  "idAnalyticsMaterial": 1,
  "eventId": "a26a582a-b670-461a-8728-9272f47bc6b5",
  "eventIdElement": "null",
  "idRepository": "1",
  "typeElement": "stand",
  "userId": "6c25110d-4256-42e1-8205-b75ece274487",
  "createdAt": "2022-03-07T13:29:06.081Z"
}
],
"boothLogs": [
{
  "idBoothLog": 1,
  "eventId": "a26a582a-b670-461a-8728-9272f47bc6b5",
  "boothNumber": 2,
  "userId": "a26a582a-b670-461a-8728-9272f47bc6b5",
  "socketId": "hajajjjjjjhshahj",
  "createdAt": "2022-03-07T13:33:43.835Z",
  "endedAt": "2022-03-07T13:33:43.835Z"
}
],
"accessLogs": [
{
  "idAccess": 1,
  "eventId": "a26a582a-b670-461a-8728-9272f47bc6b5",
  "urlAccess": "localhost:3000/my-event",
  "craetedAt": "2022-03-04T11:59:26.843Z",
  "endedAt": "2022-03-04T11:59:32.056Z",
  "userId": "6c25110d-4256-42e1-8205-b75ece274487",
  "socketId": "Sv2VYLdMmW_XIjkyAAAB"
}
],
"accreditationsEvent": [
{
  "idAccreditationPage": 1,
  "userId": "6c25110d-4256-42e1-8205-b75ece274487",
  "ip": "78.899.990.00",
  "browser": "string",
  "eventId": "a26a582a-b670-461a-8728-9272f47bc6b5",
  "createdAt": "2022-03-05T14:23:21.640Z"
}
],
"analyticsEventPage": [
{
  "idAnalyticsEventPage": 1,
  "ip": "78.899.990.00",
  "cityIp": "Limerick",
  "browser": "Chrome",
  "eventId": "a26a582a-b670-461a-8728-9272f47bc6b5",
  "createdAt": "2022-03-04T11:34:47.773Z"
}
]
}

What I want to do is…
make an route where I can download this JSON object parsed to CSV.
I’m using Node.js and Express.

Or simply parse the object then I can handle the download in
the client as well

For something like the following:

"use strict";
let a = 1;
console.log(eval(`
    a++; 
    let b=4;
`));
console.log(`a=${a}, b=${b}`);
// ReferenceError: b is not defined

Is it possible to do something where it prints undefined or something if the variable is not there instead of throwing an error? Something conceptually like:

console.log(`a=${a}, b=$?.{b}`)

I don’t understand why a callback function defined with () is only executed immediately and never again. For instance:

<body>
    <button type="button">Click Me!</button>

    <script>
      const buttonElement = document.querySelector('button');
      function sayHello(e){
          console.log("hello")
      }
      buttonElement.addEventListener('click', sayHello());  // function sayHello will be executed imidiately only once
      buttonElement.addEventListener('click', sayHello);    // function sayHello will be executed only when button is clicked

    </script>
</body>

Why does the first EventListener will be executed immediately and never work again ?

I have two script:
scipt1.js:

(function ($) {
‘use strict’;

var A = function (element, options) {
    this.element = $(element);
 
};

A.prototype.update = function update() {}
   
$.fn.doA = function (option) {
    return this.each(function test() {
            newA = new A(this, options);
        }

       
    });
};

}(jQuery));

And scipt2.js from incline html:

    $( document ).ready(function(){
                    $('#$this->id').doA($javascriptParameterString);
                    });    

In $( document ).ready(function().. from script2.js, I want to call the function update from scipt1.js after doA executed. Is there anyway I can reference the instance newA and call that function update?

I’m trying to use selenium to scrape a webpage, and one of my elements dynamically loads a finite amount of content (IE not like twitter where you can just keep scrolling) when I scroll to the bottom of it.

Now I could simply do something like

var scrollbar = document.getElementsByClassName("dataTables_scrollBody")[0]
var last = -1;
var curr = scrollbar.scrollHeight;
while (curr != last) {
    last = curr;
    scrollbar.scrollTop = curr;
    curr = scrollbar.scrollHeight;
}

And in fact, that’s what I’m doing. However, the actual load operation on the data table takes so long that this script exits by the time the load finishes, meaning I only ever get halfway down the scrollbar.

What’s a good way to make sure that I’ve scrolled all the way to the bottom of the scroll bar?

This question is different from Scroll to bottom of div? because I don’t have access to the raw HTML, and it’s different from Scroll Automatically to the Bottom of the Page because my page is dynamically loading content.

Perhaps I could force an ajax load of all the content in the panel, but I don’t know how to do that, and I don’t want to wade through miles of minified code to figure out how the page owner does it.

I can’t figure out a way to use query inside of useEffect without an infinite loop.

const query = new URLSearchParams(useLocation().search);

useEffect(() => {
  query.forEach((value, field) => {
    ...
  }
 }, [query]);

Any ideas?

so I have a Discord bot which when someone sends a message in my server, the bot sends the message to my dm’s, and because the rate limit is 5 a second, if multiple messages are sent a second which they are it rate limit my bot, my question is how can I make it so my discordjs bot sends each message to my dm’s a few seconds after its sent.

For example message 1 is sent, 10 seconds later message 1 is dm’ed to me, and if message 2 is sent straight after 1, then still send 10 seconds later after the message is sent.

on my project im using chart js bar graph and line graph for data visualization from mysql database using php and javascript , both works perfect but when i try to open it on mobile device
only the line graph doesn’t work properly .
I cant see the line and also i see only 2 axis.
I tried to change mantainAspectRatio and responsive options .
I also tried to add resize-observer-polyfill.
nothing works
Does anyone have an idea how to solve this??

js file:
”’

function myFunction() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var type = [];
  var gain = [];
  var range = [];
  var dates =[];
  var gains = [];
  var gains2=[];
  range=getDates(new Date(data2[data2.length-1].TargetStart), new Date(data2[data2.length-1].TargetEnd))
for(var i in data2) {
    
    type.push("raise type: "+data2[i].type);
    gain.push( data2[i].SellPrice- (data2[i].amount* data2[i].BuyPrice) );
    dates.push(new Date(data2[i].EndDate));
    
    
  }
var x= [];
  for(let i=0;i<data2.length;i++) {  
        for (var j in range){
            if(range[j]>=dates[i]){x.push({d:range[j],g:gain[i]});break;}
    }
  }
  
  for (var j in range){
    //  if(range[3]<range[j])break;
      var culgain=0;
    for(var i in x) {    
        if(range[j]>=x[i].d)culgain+=x[i].g;
    }
    
    gains.push({x:range[j] , y:culgain});
    
  }
  
    for (var j in gains){
        if(gains[3].x<gains[j].x)break;
        gains2.push({x:gains[j].x,y:gains[j].y});
        
    }
var he=data2[data2.length-1].Aname+': רווחי גיוסים צפויים';
    
    var he2=data2[data2.length-1].Aname+':רווחי גיוסים';
const data = {
    
    datasets: [{
        label: he,
        data: gains,
        backgroundColor: "rgba(59, 89, 152, 0.75)",
        borderColor: "rgba(59, 89, 152, 1)",
        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
        tension: 0.1,
        borderWidth: 1
    },
    {
        label: he2,
        data: gains2,
        backgroundColor: "rgba(211, 72, 54, 0.75)",
        borderColor: "rgba(211, 72, 54, 1)",
        pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
        pointHoverBorderColor: "rgba(211, 72, 54, 1)",
        tension: 0.3,
        
        borderWidth: 3
    }
    
    
    ]
};
const config = {
    labels:range,
    type: 'line',
    data,
    options :{
        

        
        scales : {
            x : {
                
                type : 'time' ,
                time : {
                    unit : 'week'
                }
            },
            y :{
            //max:data2[data2.length-1].Target,
            //beginAtZero: true
            suggestedMin: 0,
            suggestedMax: data2[data2.length-1].Target
            }
        }
    }
    
    
};
let el = document.getElementById("mycanvas");
    //If it isn't "undefined" and it isn't "null", then it exists.
if(typeof(el) != 'undefined' && el != null){
    el.parentNode.removeChild(el);
} 

el = document.getElementById("myTableHead");
    //If it isn't "undefined" and it isn't "null", then it exists.
if(typeof(el) != 'undefined' && el != null){
    el.parentNode.removeChild(el);
}   


    
let table = document.createElement('canvas');
    table.id="mycanvas";

    // Adding the entire table to the body tag
    document.getElementById('wrap').appendChild(table);
    


var ctx = document.getElementById("mycanvas");
const myChart = new Chart(ctx,config); } };

xmlhttp.open("GET", "raisegraph.php", true);
xmlhttp.send();
              }




    
    

    
    
    
    

”’

on computer

on computer

on safari

on safari