Category: javascript

I am learning react and Typescript,
I need to pass TypeScript Interface Object from the parent to the child component, if I remove TypeScript and do it in pure React, it works.

TypeScript Interface

export interface IUser {
  id: number;
  name: string;
  username: string;
  email: string;
}

Parent.tsx

import { useEffect, useState } from "react";
import { IUser } from "./ApiInterface";
import Child from "./Child";
export default function App() {
  const [users, setUsers] = useState<IUser[]>();

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users`)
      .then((res) => res.json())
      .then((res) => setUsers(res as IUser[]));
  }, []);

  return <Child users={users} />;
}

Child.tsx

import { IUser } from "./ApiInterface";

const Child: React.FunctionComponent<IUser[]> = (users: IUser[]): JSX.Element => {
  return (
    <div>
      {users.map((u, i) => (
        <h1 key={u.id}>{u.name}</h1>
      ))}
    </div>
  );
};
export default Child;

error

ERROR in src/App.tsx:14:17
TS2322: Type '{ users: IUser[] | undefined; }' is not assignable to type 'IntrinsicAttributes & IUser[]'.
  Property 'users' does not exist on type 'IntrinsicAttributes & IUser[]'.
    12 |   }, []);
    13 |
  > 14 |   return <Child users={users} />;
       |                 ^^^^^
    15 | }
    16 |

I live in India and here the timezone is IST .

Sounds like the default time zone NextJS uses is UTC 0 because I defined the maxAge for the session as 1 hour but actually, the session expires 3 hours later.

How could I fix it ?

session: { maxAge: 60 * 60, // 1 hour in seconds },

Set the expiretime 1 hour from now

I’m super new in iOS Cordova now I’m struggling in navigating from one page into another . I just need need to know how the working of a page having a button called click and if I click that button it should go into next page. simple as like what we create like navigating viewController in iOS.

index.html
index.js
App.js

I’m trying to run this on localhost:3000 but it doesn’t working it’s just showing blank page. it should be showing a <h1>GPT-3</h1> like it’s on App.js.

On terminal, I tried the command: npm install react-icons after that i tried npm start and nothing appear on my browser, just blank page.

Windows 11 – Versão: 22H2

Opera – Versão: 99.0.4788.88

I’m just an adventurous (newbie).

Thanks in advance!.

I was trying to add a individual digits of an BigInt number to an array. When I did that I encountered the above error.

Below is the code Snippet:
var plusOne = function(digits) {
    const outputValue = BigInt(digits.join("")) + 1n;
    let arr = [];
    while(outputValue > 0)
    {
        arr.push(BigInt(outputValue%10));
        outputValue = BigInt(Math.floor(outputValue/10));
    }
    return arr;
};
  

  console.log(plusOne([6,1,4,5,3,9,0,1,9,5,1,8,6,7,0,5,5,4,3])); 

Can you please tell me what am I doing wrong?

I tried making the push into the array as a BigInt but it never worked. I want to add the individual digits to the array from the BigInt Number.

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
const div = document.createElement('div')
div.innerHTML = '<!-- -- -->'
foreignObject.appendChild(div)
svg.appendChild(foreignObject);
const img = document.createElement('img')
img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`
document.body.appendChild(img)

the <!-- -- --> makes the img load error，change to <!-- a --> is fine.
and the original comment node like this <!--a id="TwitterLink" title="Share on Twitter"> <img id="TwitterImg" /></a> <a-- id="FacebookLink" title="Share on Facebook"> <img id="FacebookImg" /></a--> here is a <a-- inside the comment node

what cause this problem? please help

My target function is to have a sequence based on my condition. As we can see on my code, i have these lines of code:

My condition:

  let minGap = 10; //fightNumber Difference
  let maxGap = 30; //fightNumber Difference

My goal is for example:

Fighter 1: ‘V’ is fightNumber 1, his next fight should be 10 (Minimum)
or 30 (Maximum). But in my current function, he got a match again at
fightNumber 6 (Which is equal to 5 fightNumber difference only).

It means that my current function didn’t meet my condition which is
equal to (Please see above conditions).

I think i’m having a problem regarding my condition. Is there a way where i can achieve my goal?

Thank you

  const data = [
    { id: "1", fighter1: "V", fighter2: "DD", fightNumber: 1 },
    { id: "2", fighter1: "R", fighter2: "V", fightNumber: 2 },
    { id: "3", fighter1: "J", fighter2: "X", fightNumber: 3 },
    { id: "4", fighter1: "H", fighter2: "KK", fightNumber: 4 },
    { id: "5", fighter1: "DD", fighter2: "MM", fightNumber: 5 },
    { id: "6", fighter1: "V", fighter2: "Z", fightNumber: 6 },
    { id: "7", fighter1: "V", fighter2: "SS", fightNumber: 7 },
    { id: "8", fighter1: "C", fighter2: "V", fightNumber: 8 },
    { id: "9", fighter1: "P", fighter2: "joker", fightNumber: 9 },
    { id: "10", fighter1: "P", fighter2: "LL", fightNumber: 10 },
    { id: "11", fighter1: "Y", fighter2: "QQ", fightNumber: 11 },
    { id: "12", fighter1: "R", fighter2: "OO", fightNumber: 12 },
    { id: "13", fighter1: "D", fighter2: "R", fightNumber: 13 },
    { id: "14", fighter1: "X", fighter2: "DD", fightNumber: 14 },
    { id: "15", fighter1: "P", fighter2: "W", fightNumber: 15 },
    { id: "16", fighter1: "Y", fighter2: "BB", fightNumber: 16 },
    { id: "17", fighter1: "D", fighter2: "O", fightNumber: 17 },
    { id: "18", fighter1: "W", fighter2: "CC", fightNumber: 18 },
    { id: "19", fighter1: "JJ", fighter2: "KK", fightNumber: 19 },
    { id: "20", fighter1: "I", fighter2: "T", fightNumber: 20 },
    { id: "21", fighter1: "T", fighter2: "MM", fightNumber: 21 },
    { id: "22", fighter1: "R", fighter2: "RR", fightNumber: 22 },
    { id: "23", fighter1: "T", fighter2: "FF", fightNumber: 23 },
    { id: "24", fighter1: "G", fighter2: "DD", fightNumber: 24 },
    { id: "25", fighter1: "L", fighter2: "FF", fightNumber: 25 },
    { id: "26", fighter1: "S", fighter2: "EE", fightNumber: 26 },
    { id: "27", fighter1: "BB", fighter2: "GG", fightNumber: 27 },
    { id: "28", fighter1: "E", fighter2: "MM", fightNumber: 28 },
    { id: "29", fighter1: "J", fighter2: "T", fightNumber: 29 },
    { id: "30", fighter1: "V", fighter2: "X", fightNumber: 30 },
    { id: "31", fighter1: "CC", fighter2: "DD", fightNumber: 31 },
    { id: "32", fighter1: "Q", fighter2: "EE", fightNumber: 32 },
    { id: "33", fighter1: "C", fighter2: "T", fightNumber: 33 },
    { id: "34", fighter1: "H", fighter2: "U", fightNumber: 34 },
    { id: "35", fighter1: "Z", fighter2: "II", fightNumber: 35 },
    { id: "36", fighter1: "A", fighter2: "JJ", fightNumber: 36 },
    { id: "37", fighter1: "H", fighter2: "T", fightNumber: 37 },
    { id: "38", fighter1: "D", fighter2: "OO", fightNumber: 38 },
    { id: "39", fighter1: "L", fighter2: "O", fightNumber: 39 },
    { id: "40", fighter1: "T", fighter2: "DD", fightNumber: 40 },
    { id: "41", fighter1: "F", fighter2: "MM", fightNumber: 41 },
    { id: "42", fighter1: "N", fighter2: "V", fightNumber: 42 },
    { id: "43", fighter1: "X", fighter2: "EE", fightNumber: 43 },
    { id: "44", fighter1: "G", fighter2: "PP", fightNumber: 44 },
    { id: "45", fighter1: "I", fighter2: "Q", fightNumber: 45 },
    { id: "46", fighter1: "K", fighter2: "CC", fightNumber: 46 },
    { id: "47", fighter1: "F", fighter2: "DD", fightNumber: 47 },
    { id: "48", fighter1: "Q", fighter2: "AA", fightNumber: 48 },
    { id: "49", fighter1: "AA", fighter2: "PP", fightNumber: 49 },
    { id: "50", fighter1: "LL", fighter2: "TT", fightNumber: 50 },
    { id: "51", fighter1: "P", fighter2: "Z", fightNumber: 51 },
    { id: "52", fighter1: "W", fighter2: "FF", fightNumber: 52 },
    { id: "53", fighter1: "MM", fighter2: "RR", fightNumber: 53 },
    { id: "54", fighter1: "FF", fighter2: "II", fightNumber: 54 },
    { id: "55", fighter1: "F", fighter2: "P", fightNumber: 55 },
    { id: "56", fighter1: "G", fighter2: "MM", fightNumber: 56 },
    { id: "57", fighter1: "O", fighter2: "BB", fightNumber: 57 },
    { id: "58", fighter1: "H", fighter2: "PP", fightNumber: 58 },
    { id: "59", fighter1: "K", fighter2: "O", fightNumber: 59 },
    { id: "60", fighter1: "P", fighter2: "BB", fightNumber: 60 },
    { id: "61", fighter1: "HH", fighter2: "KK", fightNumber: 61 },
    { id: "62", fighter1: "B", fighter2: "K", fightNumber: 62 },
    { id: "63", fighter1: "Y", fighter2: "KK", fightNumber: 63 },
    { id: "64", fighter1: "LL", fighter2: "OO", fightNumber: 64 },
    { id: "65", fighter1: "PP", fighter2: "QQ", fightNumber: 65 },
    { id: "66", fighter1: "M", fighter2: "II", fightNumber: 66 },
    { id: "67", fighter1: "E", fighter2: "KK", fightNumber: 67 },
    { id: "68", fighter1: "Q", fighter2: "LL", fightNumber: 68 },
    { id: "69", fighter1: "AA", fighter2: "CC", fightNumber: 69 },
    { id: "70", fighter1: "NN", fighter2: "OO", fightNumber: 70 },
    { id: "71", fighter1: "E", fighter2: "FF", fightNumber: 71 },
    { id: "72", fighter1: "G", fighter2: "K", fightNumber: 72 },
    { id: "73", fighter1: "C", fighter2: "Q", fightNumber: 73 },
    { id: "74", fighter1: "D", fighter2: "U", fightNumber: 74 },
    { id: "75", fighter1: "O", fighter2: "OO", fightNumber: 75 },
    { id: "76", fighter1: "U", fighter2: "Z", fightNumber: 76 },
    { id: "77", fighter1: "X", fighter2: "JJ", fightNumber: 77 },
    { id: "78", fighter1: "G", fighter2: "QQ", fightNumber: 78 },
    { id: "79", fighter1: "Q", fighter2: "Z", fightNumber: 79 },
    { id: "80", fighter1: "JJ", fighter2: "NN", fightNumber: 80 },
    { id: "81", fighter1: "F", fighter2: "QQ", fightNumber: 81 },
    { id: "82", fighter1: "QQ", fighter2: "SS", fightNumber: 82 },
    { id: "83", fighter1: "EE", fighter2: "QQ", fightNumber: 83 },
    { id: "84", fighter1: "KK", fighter2: "PP", fightNumber: 84 },
    { id: "85", fighter1: "G", fighter2: "J", fightNumber: 85 },
    { id: "86", fighter1: "EE", fighter2: "FF", fightNumber: 86 },
    { id: "87", fighter1: "D", fighter2: "HH", fightNumber: 87 },
    { id: "88", fighter1: "H", fighter2: "OO", fightNumber: 88 },
    { id: "89", fighter1: "O", fighter2: "R", fightNumber: 89 },
    { id: "90", fighter1: "K", fighter2: "HH", fightNumber: 90 },
    { id: "91", fighter1: "AA", fighter2: "TT", fightNumber: 91 },
    { id: "92", fighter1: "M", fighter2: "CC", fightNumber: 92 },
    { id: "93", fighter1: "U", fighter2: "EE", fightNumber: 93 },
    { id: "94", fighter1: "Z", fighter2: "FF", fightNumber: 94 },
    { id: "95", fighter1: "HH", fighter2: "JJ", fightNumber: 95 },
    { id: "96", fighter1: "C", fighter2: "E", fightNumber: 96 },
    { id: "97", fighter1: "H", fighter2: "I", fightNumber: 97 },
    { id: "98", fighter1: "C", fighter2: "U", fightNumber: 98 },
    { id: "99", fighter1: "F", fighter2: "X", fightNumber: 99 },
    { id: "100", fighter1: "G", fighter2: "SS", fightNumber: 100 },
    { id: "101", fighter1: "W", fighter2: "JJ", fightNumber: 101 },
    { id: "102", fighter1: "C", fighter2: "P", fightNumber: 102 },
    { id: "103", fighter1: "K", fighter2: "W", fightNumber: 103 },
    { id: "104", fighter1: "CC", fighter2: "TT", fightNumber: 104 },
    { id: "105", fighter1: "L", fighter2: "TT", fightNumber: 105 },
    { id: "106", fighter1: "J", fighter2: "EE", fightNumber: 106 },
    { id: "107", fighter1: "M", fighter2: "Y", fightNumber: 107 },
    { id: "108", fighter1: "Z", fighter2: "AA", fightNumber: 108 },
    { id: "109", fighter1: "E", fighter2: "BB", fightNumber: 109 },
    { id: "110", fighter1: "F", fighter2: "I", fightNumber: 110 },
    { id: "111", fighter1: "N", fighter2: "RR", fightNumber: 111 },
    { id: "112", fighter1: "D", fighter2: "NN", fightNumber: 112 },
    { id: "113", fighter1: "L", fighter2: "HH", fightNumber: 113 },
    { id: "114", fighter1: "J", fighter2: "L", fightNumber: 114 },
    { id: "115", fighter1: "L", fighter2: "U", fightNumber: 115 },
    { id: "116", fighter1: "BB", fighter2: "TT", fightNumber: 116 },
    { id: "117", fighter1: "J", fighter2: "U", fightNumber: 117 },
    { id: "118", fighter1: "A", fighter2: "RR", fightNumber: 118 },
    { id: "119", fighter1: "I", fighter2: "SS", fightNumber: 119 },
    { id: "120", fighter1: "J", fighter2: "SS", fightNumber: 120 },
    { id: "121", fighter1: "B", fighter2: "NN", fightNumber: 121 },
    { id: "122", fighter1: "OO", fighter2: "PP", fightNumber: 122 },
    { id: "123", fighter1: "S", fighter2: "X", fightNumber: 123 },
    { id: "124", fighter1: "S", fighter2: "BB", fightNumber: 124 },
    { id: "125", fighter1: "N", fighter2: "II", fightNumber: 125 },
    { id: "126", fighter1: "R", fighter2: "II", fightNumber: 126 },
    { id: "127", fighter1: "S", fighter2: "W", fightNumber: 127 },
    { id: "128", fighter1: "II", fighter2: "NN", fightNumber: 128 },
    { id: "129", fighter1: "Q", fighter2: "Y", fightNumber: 129 },
    { id: "130", fighter1: "B", fighter2: "W", fightNumber: 130 },
    { id: "131", fighter1: "E", fighter2: "M", fightNumber: 131 },
    { id: "132", fighter1: "GG", fighter2: "QQ", fightNumber: 132 },
    { id: "133", fighter1: "S", fighter2: "GG", fightNumber: 133 },
    { id: "134", fighter1: "S", fighter2: "PP", fightNumber: 134 },
    { id: "135", fighter1: "B", fighter2: "GG", fightNumber: 135 },
    { id: "136", fighter1: "M", fighter2: "NN", fightNumber: 136 },
    { id: "137", fighter1: "F", fighter2: "Y", fightNumber: 137 },
    { id: "138", fighter1: "I", fighter2: "R", fightNumber: 138 },
    { id: "139", fighter1: "KK", fighter2: "SS", fightNumber: 139 },
    { id: "140", fighter1: "D", fighter2: "GG", fightNumber: 140 },
    { id: "141", fighter1: "H", fighter2: "AA", fightNumber: 141 },
    { id: "142", fighter1: "A", fighter2: "MM", fightNumber: 142 },
    { id: "143", fighter1: "NN", fighter2: "TT", fightNumber: 143 },
    { id: "144", fighter1: "L", fighter2: "LL", fightNumber: 144 },
    { id: "145", fighter1: "S", fighter2: "LL", fightNumber: 145 },
    { id: "146", fighter1: "O", fighter2: "CC", fightNumber: 146 },
    { id: "147", fighter1: "GG", fighter2: "SS", fightNumber: 147 },
    { id: "148", fighter1: "N", fighter2: "HH", fightNumber: 148 },
    { id: "149", fighter1: "A", fighter2: "II", fightNumber: 149 },
    { id: "150", fighter1: "B", fighter2: "LL", fightNumber: 150 },
    { id: "151", fighter1: "K", fighter2: "M", fightNumber: 151 },
    { id: "152", fighter1: "A", fighter2: "N", fightNumber: 152 },
    { id: "153", fighter1: "M", fighter2: "HH", fightNumber: 153 },
    { id: "154", fighter1: "A", fighter2: "E", fightNumber: 154 },
    { id: "155", fighter1: "N", fighter2: "GG", fightNumber: 155 },
    { id: "156", fighter1: "AA", fighter2: "RR", fightNumber: 156 },
    { id: "157", fighter1: "B", fighter2: "I", fightNumber: 157 },
    { id: "158", fighter1: "C", fighter2: "Y", fightNumber: 158 },
    { id: "159", fighter1: "RR", fighter2: "TT", fightNumber: 159 },
    { id: "160", fighter1: "N", fighter2: "joker", fightNumber: 160 },
    { id: "161", fighter1: "JJ", fighter2: "RR", fightNumber: 161 },
    { id: "162", fighter1: "A", fighter2: "B", fightNumber: 162 },
  ];
  function rearrangeFightNumbers(data) {
    const totaldata = data.length;

    // Helper function to find the last fight number for a fighter
    function findLastFightNumber(fighterName) {
      const fights = data.filter(
        (fight) =>
          fight.fighter1 === fighterName || fight.fighter2 === fighterName
      );
      return Math.max(...fights.map((fight) => fight.fightNumber));
    }

    // Calculate new fight numbers for each fighter with the desired gap
    const uniqueFighters = Array.from(
      new Set(
        data
          .map((fight) => fight.fighter1)
          .concat(data.map((fight) => fight.fighter2))
      )
    );

    for (const fighter of uniqueFighters) {
      const fighterFights = data.filter(
        (fight) => fight.fighter1 === fighter || fight.fighter2 === fighter
      );
      let totalFights = fighterFights.length;
      let minGap = 10;
      let maxGap = 30;

      // Adjust the gap if necessary to fit the desired criteria
      while ((totalFights - 1) * minGap > totaldata) {
        minGap--;
      }
      while ((totalFights - 1) * maxGap < totaldata) {
        maxGap++;
      }

      let currentFightNumber = findLastFightNumber(fighter) + minGap;

      for (const fight of fighterFights) {
        fight.fightNumber = Math.min(currentFightNumber, data.length);
        currentFightNumber +=
          minGap + Math.floor(Math.random() * (maxGap - minGap + 1));
      }
    }

    // Sort the fights based on their new fight numbers
    data.sort((a, b) => a.fightNumber - b.fightNumber);

    // Ensure fight numbers are unique and within the range of 1 to 162
    for (let i = 0; i < data.length; i++) {
      data[i].fightNumber = Math.min(i + 1, totaldata);
    }

    return data;
  }
  // Usage:
  const updatedData = rearrangeFightNumbers(data);
  console.log(updatedData);

Code Image

This is a part of code of summarzier, python script. Creating a website, want to add it in the code such that when a button is clicked, onClick calls a function is javascript, and the function in JS runs this python script code.
**
CODE WORKFLOW TO EXECUTE**
Button Clicked IN HTML -> OnClick function -> Function written in JS -> Executes Python script? How to integrate?

Can anyone help with this?

I tried and surfed the net but was not successful, can anyone provide exact steps to execute code workflow?

I am currently in the process of developing a sophisticated video chat website, employing the advanced PeerJS framework. However, I have encountered an unfortunate setback where the remote video stream is not functioning as intended.

here is logs

I have made attempts to explore alternative solutions from various GitHub projects, but regrettably, none of them have proven successful. In each instance, the remote stream fails to load, posing a persistent challenge.

Furthermore, I had clone certain GitHub projects, yet regrettably, I have encountered similar issues where those have also failed to yield the desired results.

class Person {
  #name = 'Ergonomic brand checks for Private Fields';
  aa=1
  static check(obj) {
    return #name in obj;
  }
}

var p = new Person()

p.#name can be accessed! means not supported…

p.#age has error report, means supported…

I’m writing a NodeJS package and part of the function does a dynamic synchronous require in the following manner:

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

function main(params) {
  const data = require(params.json);
  // do things with data
}

My expectation for the params.json is that the person using this project could either provide a path to a library within my project, which is shipped along with it OR point it at their own in their project.

import main from 'my-project';
import json from 'my-project/lib/some.json';

function main({ json }); // should work

import main from 'my-project';
import json from './path/to/some.json';

function main({ json }); // should also work

However, I can only get one of these to work at a time so far. I can either do a straight require as shown above (which looks only within my-project) OR do require(path.resolve(params.json)) which looks at the cwd and needs an ugly node_modules path back to my project to work.

My understanding of the resolver was that it would look for my-project in node_modules first before then considering it a path within the project. As an example:

const React = require('react'); // finds React in `node_modules/react`
const localproject = require('./stuff'); // finds some local JS stuff

I am reading that the "main" key in the package.json might also have an effect here, so I’ll provide the relevant parts as well:

  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "type": "module",
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    },
    "./lib/*": "./lib/*"
  },
  "files": [
    "dist",
    "lib"
  ],

The function is exported out of both index.cjs and index.mjs to cover CJS and ESM. The library of .json I’m looking to expose is found at /lib.

Thank you in advance.

I’m trying to convert my previous vanilla JavaScript files into React framework. My application has to use a map and I chose Leaflet for it. Previously, I attached the cdn of leaflet to the head of my index.html file but now I installed leaflet through npm directly into the project. Usually, the syntax to implement leaflet is const map = L.map(“map-Id”);
And I have a few hundred lines of code in my file that use JavaScript to manipulate the map. I’m now having trouble with just the first step of displaying the map on the website. I couldn’t find any solution to const map = L.map(“”) since when I tried to include my Leaflet script (useLeaflet.js), into a React file as a component, it always returns the error that whether it couldn’t recognize map or map has been initialized. Hope that you can help me with this. I’m a newbie to React so the trial took me so long.

I tried to create const map = L.map or L.Map or map or Map both in the React file or a separate thing. The error is nearly always map is not define. I don’t know what other to do since I couldn’t find much. There is the react-leaflet library but it has limited capacity in term of functionalities, functions, methods, etc. so I want to stick with leaflet library only.

import { useEffect } from "react";
import L from "leaflet";
import "./leaflet.js";
function LeafletMap() {
useEffect(() => {
    let container = L.DomUtil.get("map");
    if (container != null) {
      container._leaflet_id = null;
    }
    let map = L.map("mapid").setView([cenLat, cenLng], zoom);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: "Map data © OpenStreetMap contributors",
    }).addTo(map);

    L.marker([-31.505, 150.09]).addTo(map);
  }, []);
  return (
    <div id="mapid"></div>
);
}
export default LeafletMap;

I’m trying multiple variations of the above code but none works or whatsoever.

I’m trying to disable the submit button on my form until all mandatory fields are filled. I’ve seen other answers but none address how to do it for dropdown menus or radio buttons, just text input. My intention is user must input something for dropdowns and radio button before the submit button is enabled

Note: I don’t want to use the required attribute as it can be removed through inspect

the current code just has the button always disabled no matter what

<div class="dropdown">
                <div class="dropdownchild">
                    <select id="stroke" name="stroke" onchange="selectdist()" class="required" onkeyup="enableSubmit()" required>
                        <option value="">Stroke</option>
                        <option value="fly">Butterfly</option>
                        <option value="back">Backstroke</option>
                        <option value="breast">Breaststroke</option>
                        <option value="free">Freestyle</option>
                        <option value="im">Individual Medley</option>
                    </select>
                </div>
                <div class="dropdownchild">
                    <select id="gender" name="gender" class="required" onkeyup="enableSubmit()" required>
                        <option value="">Gender</option>
                        <option value="m">Male</option>
                        <option value="f">Female</option>
                    </select>
                </div>
            </div>

            <div class="radio-toolbar" class="required" onkeyup="enableSubmit()">
                <input type="radio" id="100" name="distance" value="100" class="required" onkeyup="enableSubmit()">
                <label id="100l" for="100">100m</label>

                <input type="radio" id="200" name="distance" value="200">
                <label id="200l" for="200">200m</label>

                <input type="radio" id="400" name="distance" value="400">
                <label id="400l" for="400">400m</label>

                <input type="radio" id="800" name="distance" value="800">
                <label id="800l" for="800">800m</label>

                <input type="radio" id="1500" name="distance" value="1500">
                <label id="1500l" for="1500">1500m</label>
            </div>
            <button id="calculate" type="submit" form="entry" value="Submit" onClick="validatefilledIn()" disabled>Calculate</button>
        </div>

JS:

function enableSubmit(){
    let inputs = document.getElementsByClassName('required');
    let btn = document.querySelector('button[type="submit"]');
    let isValid = true;
    for (var i = 0; i < inputs.length; i++){
        let changedInput = inputs[i];
        if (changedInput.value.trim() === "" || changedInput.value === null){
            isValid = false;
            break;
        }
    }
    btn.disabled = !isValid;
}

This is my first application and I’m currently using a real-time database (Firebase). I’m trying to get a value from timeArray[] and have it shown in timeInput.innerHTML when I click the “Save” Button, but then I got an error saying timeArray[] is not defined.

onValue(qualTime, function(snapshot) {
let timeArray = Object.values(snapshot.val());
});

saveButton.addEventListener(“click”, function() {
document.getElementById(“timeInput”).innerHTML = timeArray[0];
});

I also tried putting the saveButton.addEventListener() in the onValue() but that got the console to throw at me a bunch of errors and the HTML app itself prints out undefined.

I was working in a IMC calculator to exercise js. This calculator should shows the IMC and a message acording the result but, for some reason, it always shows the default message.

    

const form = document.querySelector('#form');
    
    
    form.addEventListener('submit',(e)=>{
        e.preventDefault();

    const weight = document.querySelector('#weight').value;
    const height = document.querySelector('#height').value;

    const bmi = (weight / (height **2)).toFixed(2);


    const value = document.querySelector('#value');
    let description = '';

    document.querySelector('#infos').classList.remove('hiden');

    
    switch(bmi){
        case bmi < 18.5:
            description = 'Cuidado! Você está abaixo do peso!';
            break;
        case bmi >= 18.5 && bmi <= 25:
            description = "Você está no peso ideal!";
            value.classList.remove('attention');
            value.classList.add('normal');
            break;
        case bmi > 25 && bmi <= 30:
            description = "Cuidado! Você está com sobrepeso!";
            break;
        case bmi > 30 && bmi <= 35:
            description = "Cuidado! Você está com obesidade moderada!";
            break;
        case bmi > 35 && bmi <= 40:
            description = "Cuidado! Você está com obesidade severa!";
            break;
        case bmi > 40:
            description = "Cuidado! Você está com obesidade morbida!";
            break;
        default:
            description = "verifique novamente";
            break;
        }
    value.textContent = bmi.replace('.', ',')
    document.querySelector('#description').textContent =description ;
   
});

I’ve tried to rewrite, use parentheses in case conditions like this > case (bmi > 25 && bmi <= 30) and checked the homework instructions. Algo seak in yt looking for some tutorial using switch, but didn’t found any.