Category: javascript

Currently, I have code that creates variables using the for() loop, but I want the data to be taken from the for of() loop, if that makes any sense.

I want the data taken from

 for (players of playerList) {

      let playList = []
      let usertag = await client.users.fetch(players).catch(() => null) // this is the user object
      playList.push({ name: usertag, value: user, inline: true})
      embed.addFields(playList)

      var user = await User.findOne({
        ID: usertag
      });

    }    

and put it here to make the variables:

 function createVariable(){
    
      for (var i = 0; i <= playerList.length; ++i) {
          accounts[i] = user;
      }
    
      return accounts;
    }

    createVariable()

   // taken from - https://stackoverflow.com/questions/6645067/javascript-dynamically-creating-variables-for-loops

so the variables will return something like

accounts[0] = User({id: 10382823, ...})
accounts[1] = User({id: 53885836, ...})

Current Code:
https://pastebin.com/E7YjSins

Eg. 
Unit of measurement = 9 pencil per box
Cost of 1 box = Rs.100 
Cost of 1 pensil = 100/9 = Rs.11.11

So if I sell 900 pencils 

calculated_cost = 11.11 * 900 = Rs.9999
actual_cost = 1000

so here difference is Rs.1 

Simillary I am getting much difference in my inventory application which causes upto Rs.1000+ in revenue loss is their any way to prevent this

So is there any framework or architectural pattern I can follow while building application for managing currency amounts

Problem: last 2 .then are getting called even while i am returning Promise.reject().

1st .then() is printing undefined and 2nd .then() is also printing the output

can someone please explain why?

let p4 = new Promise((resolve,reject)=>{
    resolve("p4 Resolved");
    });

p4.then((val)=>{
    console.log(val);
    return Promise.reject("20 Rejected"); }
    )
    .catch((error)=>{console.log(error)})
    .then((val)=>{console.log(val);return 290})
    .then((val)=>{console.log("Last then : "+val);})
    ;

I need to search in an object. There are many large objects in a real project..
Which search method to use for better performance?

if(object.test1) console.log('true')
if(object.test2) console.log('true')
if(object.test3) console.log('true')

or

for (const key in object) {
   if(key=='test1') console.log('true')
   if(key=='test2') console.log('true')
   if(key=='test3') console.log('true')
}

Is there a difference in execution speed?
Or maybe there is another way better than these?

As the title suggest, when I want to edit the form again, the checkbox displayed no values although in database the values has been successfully stored. This confuses the user since as the user complete filling in the form and want to edit it back, the checkbox changed to unticked.

From my research, do I have to use hook useOptions ? doing something like const { activeOptions } = useOptions(); ? I am not sure, my depth of knowledge in this topic is very limited but since I’ve got a project that need to completed asap(deadline is tomorrow), how can I make this work? The following are the code that I’m using right now.

<div className={'col-span-1'} >
              <InputLabel
                value={'Kata Laluan PDF'}
                className={'mb-2 font-bold text-base'}
                required={false}
              />
              <TextInput
                type={'checkbox'}
                name={'is_password'}
                className={''}
                value={data.is_password}
                handleChange={(e) => setData({ ...data, is_password: e.target.checked })}
              />
              <InputError message={errors.is_password}/>
      </div>

        <div className="col-span-1">
            <InputLabel
                value={"Stamping"}
                className={"mb-2 font-bold text-base"}
                required={false}  
            />
            <TextInput
            type={'checkbox'}
            name={''}
            className={''}
            value={data.is_stamping}
            handleChange={(e) => setData({ ...data, is_stamping: e.target.checked })}
            />
            <InputError message={errors.is_stamping} />
      </div>

I want to break the a series of numbers and separators into chapters and verses.
For example: ‘1:2-33; 333:4-55, 66:7-8’, should match three groups:

chapter: '1', verses: '2-33; '
chapter: '333', verses: '4-55, '
chapter: '66', verses: '7-8'

I would expected this regular expression to do the job:

/(?<chapter>d+)s*:(?<verses>.*?((?=d+:)|$))?/gi

But the last group fails to match verses, I get:

chapter: '1', verses: '2-33; '
chapter: '333', verses: '4-55, '
chapter: '66'

What am I doing wrong?

Basically, the user clicks on the “choose” button to choose an item and it will link them to a different page with a list of items, whenever the user clicks the “add” button of an item it will link them back to the previous page but the “choose” button should be hidden and the corresponding text and image of the item are placed instead of it.

I tried to use jquery to hide the button and show the others when I click a button from another page but it’s not working.

Here’s my main HTML

<html>
<body>
<div class="block__partlist">
                            <table class="xs-col-12">
                                <thead>
                                    <tr>
                                        <th class="th__component">Component</th>
                                        <th></th>
                                        <th class="th__Selection" colspan="2">Selection</th>
                                        <th class="th__base">Base</th>
                                        <th class="th__price">Price</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="tr__product">
                                        <td class="td__component">
                                            <a href="/pageOne.html">Item1</a>
                                        </td>


                                        
                                        <td class="td__placement--empty"></td>
                                        <td class="td__image" style="display: none;"></td>
                                        <td class="td__name" style="display: none;"></td>
                                        <td class="td__base" style="display: none;"></td>
                                        <td class="td__price" style="display: none;"></td>




                                        <td class="td__addComponent" colspan="11">
                                            <a href="/pageOne.html" class="button__add">
                                                
                                                Choose An Item
                                            </a>
                                        </td>
                                    </tr>

                                    <tr class="tr__product">
                                        <td class="td__component">
                                            <a href="/PageTwo.html">Item2</a>
                                        </td>
                                        <td class="td__placement--empty"></td>
                                        <td class="td__image" style="display: none;"></td>
                                        <td class="td__name" style="display: none;"></td>
                                        <td class="td__base" style="display: none;"></td>
                                        <td class="td__price" style="display: none;"></td>
                                        
                                        
                                        
                                        
                                        <td class="td__addComponent" colspan="11">
                                            <a href="/PageTwo.html" class="button__add">
                                                
                                                Choose An Item
                                            </a>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
</body>
</html>

Second HTML page

<html>
<body>
 <table class="productList--detailed" id="paginated_table" role="grid">
                                    <thead>
                                        <tr role="row" class="tablesorter-headerRow">
                                            <th class="th--sortable tablesorter-header tablesorter-headerUnSorted th--unsorted" data-column="1" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="paginated_table"  unselectable="on" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort" style="user-select: none;">
                                                <div class="tablesorter-header-inner">
                                                    <p>Product</p>
                                                </div>
                                            </th>
                                           
                                           
                                           
                                            
                                           
                                            <th class="th--sortable tablesorter-header tablesorter-headerUnSorted th--unsorted" data-column="7" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="paginated_table"  unselectable="on" aria-sort="none" aria-label="Price: No sort applied, activate to apply an ascending sort" style="user-select: none;">
                                                <div class="tablesorter-header-inner">
                                                    <p>Price</p>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    
                                    <tbody id="category_content" aria-live="polite" aria-relevant="all">
                                        <tr class="tr__product product-id-001" data-pb-id="001">
                                            <td class="td__name">
                                                <a>
                                                    <div class="td__imageWrapper">
                                                        <div class="td__image">
                                                            <img src="" alt="AMD">
                                                        </div>
                                                    </div>
                                                    <div class="td__nameWrapper">
                                                        <p>AMD 5000x</p>
                                                    </div>
                                                </a>
                                            </td>
                                           
                                           
                                           
                                         
                                            <td class="td__price">
                                                <p>499</p>
                                                <a href="/MAIN.html"> 
                                                <button class="btn btn--small btn--add" data-product-tag="gd001" >Add</button>
                                                </a>
                                            </td>
                                        </tr>

                                        <tr class="tr__product product-id-002" data-pb-id="002">
                                            <td class="td__name">
                                                <a>
                                                    <div class="td__imageWrapper">
                                                        <div class="td__image">
                                                            <img src="" alt="AMD">
                                                        </div>
                                                    </div>
                                                    <div class="td__nameWrapper">
                                                        <p>AMD Ryzen 5</p>
                                                    </div>
                                                </a>
                                            </td>
                                           
                                         
                                          
                                            <td class="td__price">
                                                <p>599</p>
                                                <a href="/MAIN.html"> 
                                                <button class="btn btn--small btn--add" data-product-tag="gd002" >Add</button>  
                                                </a>
                                            </td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
</body>
</html>

Third HTML page

<html>
<body>
 <table class="productList--detailed" id="paginated_table" role="grid">
                                    <thead>
                                        <tr role="row" class="tablesorter-headerRow">
                                            <th class="th--sortable tablesorter-header tablesorter-headerUnSorted th--unsorted" data-column="1" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="paginated_table"  unselectable="on" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort" style="user-select: none;">
                                                <div class="tablesorter-header-inner">
                                                    <p>Product</p>
                                                </div>
                                            </th>
                                         
                                            <th class="th--sortable tablesorter-header tablesorter-headerUnSorted th--unsorted" data-column="7" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="paginated_table"  unselectable="on" aria-sort="none" aria-label="Price: No sort applied, activate to apply an ascending sort" style="user-select: none;">
                                                <div class="tablesorter-header-inner">
                                                    <p>Price</p>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    
                                    <tbody id="category_content" aria-live="polite" aria-relevant="all">
                                        <tr class="tr__product product-id-001" data-pb-id="001">
                                            <td class="td__name">
                                                <a>
                                                    <div class="td__imageWrapper">
                                                        <div class="td__image">
                                                            <img src="" alt="Cooler Master">
                                                        </div>
                                                    </div>
                                                    <div class="td__nameWrapper">
                                                        <p>Cooler Master</p>
                                                    </div>
                                                </a>
                                            </td>

                                            <td class="td__price">
                                                <p>289</p>
                                                <a href="/MAIN.html"> 
                                                <button class="btn btn--small btn--add" data-product-tag="gd001" >Add</button>  
                                                </a>  
                                            </td>
                                        </tr>


                                    </tbody>
                                </table>
</body>
</html>

CSS

.xs-col-12{
  width: 100%;
}



th{
  color: #191b2a;
  padding: 0.5rem 0.5rem 0.5rem 0;
    font-size: 0.75rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    line-height: 1;
    font-weight: normal;
    text-align: left;
    vertical-align: bottom;
}

tr{
  border-color: #616161;
  border-top-style: solid;
  border-top-width: 1px;
}

table td{
  font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    width: 100px;
    padding: 0.5rem 1.5rem 0.5rem 0;
    border-color: #e6f0f1;
    border-top-style: solid;
    border-top-width: 1px;
}

table tbody tr td{
  height: 48px;
  font-size: 0.75rem;
}

.td__component a{
  background-color: transparent;
  text-decoration: none;
  color: #2c87c3 ;
}


.button__add{
  padding: 0.20rem 1.375rem;
  font-size: 0.75rem!important;
  background-color: #2c87c3;
  color: #ffffff;
  border-radius: 0.25rem;
  text-decoration: none!important;
  line-height: 1.25rem;
  border-style:  solid;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-width: 2px;

}







.td__name{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
}

.td__name a{
  color: #191b2a;
  display: table;
  text-decoration: none;
}


.td__imageWrapper{
  line-height: 1.25;
  display: table-cell;
  vertical-align: middle;
  width: 50px important;
  height: 50px important;                            
}

.td__image{
  border-color: #dbdbdb;
  border-style: solid;
  border-width: 1px;
  padding: 4px;
  vertical-align: middle;
  position: relative;
  text-align: center;
  width: 50px;
  height: 50px;
  background-color: #fff;
  
}

.td__image img{
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
 
}

.td__nameWrapper{
  vertical-align: middle;                                          
  padding-left: 1rem;
  line-height: 1.25;
  display: table-cell;
  
}






.specLabel{
  display: none;
}






.td__tdp{
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
  color: #26293b;
}


.td__price{
  white-space: nowrap;
}

.btn--small {
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem!important;
  margin-left: 0.5rem;
  line-height: 1.25rem;
}

.btn {
  background-color: #2c87c3;
  color: #ffffff;
  border-color: #2c87c3;
  font-size: 1.125rem;
  font-weight: 700;
  border-radius: 0.25rem;
  text-decoration: none!important;
  background-image: none;
  border-style: solid;
  border-width: 1px;
  user-select: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-width: 2px;
  transition: background-color 0.1s ease 0s,border-color 0.1s ease 0s;
  text-transform: none;
  overflow: visible;
  font: inherit;
  margin: 0;
  padding: 0.125rem 0.375rem;
  
}

my jquery

const add = document.querySelector('.btn--add');
const buttonADD = document.querySelector('.button__add');
const tdimg = document.querySelector('.td__image');
const tdname = document.querySelector('.td__name');
const tdprice = document.querySelector('.td__price');

add.addEventListener('click', function(){
    $(buttonADD).hide('');
    $(tdimg).show('');
    $(tdname).show('');
    $(tdprice).show('');
});

I appreciate any help to fix this problem

It doesn nto display any errors or warning other than no key warning but still does not display map on my webpage. It only displays text values of latitude and longitude which means getlocation() and showposition() are working .

`

<!DOCTYPE html>
<html>
  <head>
    <title>MY FORM</title>
  </head>
  <body>
    <button onclick="getLocation()">trysd</button>
    <div id="map"></div>
    <script
      type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=Function.prototype"
    ></script>
    <script>
      let x = document.getElementById('map')
      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition)
        } else {
          x.innerHTML = 'Geolocation is not supported by this browser.'
        }
      }

      function showPosition(position) {
        x.innerHTML =
          'Latitude: ' +
          position.coords.latitude +
          '<br>Longitude: ' +
          position.coords.longitude
        var mapProp = {
          center: new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
          ),
          zoom: 5,
        }
        var map = new google.maps.Map(document.getElementById('map'), mapProp)
      }
    </script>
  </body>
</html>

`

ERROR

Cannot read properties of undefined (reading ‘toLowerCase’) TypeError: Cannot read properties of undefined (reading ‘toLowerCase’) at capitalize (http://localhost:3000/static/js/bundle.js:465:24) at Alert (http://localhost:3000/static/js/bundle.js:472:17) at renderWithHooks (http://localhost:3000/static/js/bundle.js:24055:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:27341:17) at beginWork (http://localhost:3000/static/js/bundle.js:28637:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:13647:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:13691:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:13748:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:33622:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:32869:16)

I am following a tutorial on youtube and cannot understand why I am getting this error.
Can somebody please tell me how to resolve my error?

App.js

import "./App.css";
import Navbar from "./Component/Navbar";
import TextArea from "./TextArea";
import About from "./About";
import React, { useState } from "react";
import Alert from "./Component/Alert";

import { createRoot } from "react-dom/client";
import {
  BrowserRouter as Router,
  RouterProvider,
  Switch,
  Route,
  Link,
} from "react-router-dom";

function App() {
  const [mode, setMode] = useState("light");

  const toggleMode = () => {
    if (mode === "light") {
      setMode("dark");
      document.body.style.backgroundColor = "grey";
    } else {
      setMode("light");
      document.body.style.backgroundColor = "white";
    }
  };
  return (
    <>
      <Router>
        <Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />
        <Alert alert={alert} />
        <div className="container">
          <Switch>
            <Route path="/about">
              <About />
            </Route>
            <Route path="/">
              <TextArea heading="This is TextArea" mode={mode} />
            </Route>
          </Switch>
        </div>
      </Router>
    </>
  );
}

export default App;

import React from "react";

export default function Alert(props) {
  const capitalize = (word) => {
    const lower = word.toLowerCase();
    return lower.charAt(0).toUpperCase() + lower.slice(1);
  };
  return (
    props.alert && (
      <div
        class={`alert alert-${props.alert.type} alert-dismissible fade show`}
        role="alert"
      >
        <strong>{capitalize(props.alert.type)}</strong>:{props.alert.msg}
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="alert"
          aria-label="Close"
        ></button>
      </div>
    )
  );
}

I am useing WebdriverIO to send test result to Testrail recently, I met a problem which is that after I addRun in the onPrepare hook, I get the testrunId after I create testrun, and then I will update test result in afterScenario with this runId, but I found the runId is not updated, it’s still -1, How can I solve this? I know this may be something to do with aysnc and await, but I am freshman to use Javascript, Can somebody help to tell me how handle this?Thanks

//conf.js

var runId = -1;

onPrepare: async function (config, capabilities) {
        runId = await client.addRun(testdata.RAILPROJECTID, myNewRun).id;
},

afterScenario: async function (world, result, context) {
        const testResult = await client.addResultForCase(runId, caseid, content );
},

useEffect Hook execute 3 lifecycle i.e., [componentDidMount, componentDidUpdate and ComponentWillUnmount].

With this I am trying to reload my page only once if Country page is visited..

https://codesandbox.io/s/angry-nash-rc98mw?file=/src/index.js

Question: How to make this working using Route.

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" Component={App} />
      <Route path="/country" Component={Country} />
    </Routes>
  </BrowserRouter>
);

IF ANY GURUS HAVE ANSWER FOR THIS THEN I WILL REMOVE THIS ABOVE POST.

https://github.com/WICG/webcomponents/issues/754

SO SOLUTION I CAN THINK OF IS

RELOAD THE PAGE.

html code

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Digital Clock</h2>
    <div class="clock">
        <div>
            <span id="hour">00</span>
            <span class="text">Hours</span>
        </div>
        <div>
            <span id="minutes">00</span>
            <span class="text">Minutes</span>
        </div>
        <div>
            <span id="seconds">00</span>
            <span class="text">Seconds</span>
        </div>
        <div>
            <span id="ampm">AM</span>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

2. The following is my JavaScript code:

const hourEl = document.getElementById
("hour");
const minuteEl = document.getElementById
("minutes");
const secondEl = document.getElementById
("seconds");
const ampmE1 = document.getElementById
("ampm");

function updateClock(){
    let h = new Date().getHours();
    let m = new Date().getMinutes();
    let s = new Date().getSeconds();
    let ampm = "AM";
    
    if (h > 12){
        h = h - 12;
        ampm = "PM";
}

h = h < 10 ? "0" + h : h;
hourEl.innerText = h;
minuteEl.innertext = m;
secondEl.innerText = s;
ampmE1, (innerText = ampm);
setTimeout(()=>{updateClock()
    updateClock()}, 1000)
}
updateClock()

I don’t have any other option to construct the code as I’m still a new to programing, I will appreciate any advice, and also if you can narrow down the concepts for me to understand easily. Also don’t be too detailed by deviating or using deeper concepts, make it as simple as possible. thanks

I am trying to put the value of canvas pad in a Hidden input field when the user clicks the submit button. On the click of the submit button, the value does not go to the hidden input. Here is what I have on my web page:

<canvas id="colors_sketch" width="500" height="200" style="border: 1px solid #ccc;"></canvas>
<input type="hidden" asp-for="SignatureDataUrl">
<input style="float: right; margin-bottom:20px" type="submit" id="myBtn1" value="Submit" class="btn btn-primary"  />

Below is the jquery on the click of submit button:

<script type="text/javascript">
        $(document).ready(function () {
            $('#myBtn1').click(function (event) {

                 var canvas = document.querySelector('#colors_sketch');
               
                var pad = new SignaturePad(canvas);
                var data = pad.toDataURL();
              
                $('#savetarget').attr('src', data);
                $('#SignatureDataUrl').val(data);
                pad.off();
   });
        });
    </script>

when I click the submit button, I don’t see any value in SignatureDataUrl. Any help will be greatly appreciated.

I want to print a json value which was sent using AJAX in my PHP server script. This is my code:

HTML:

<input type="date" id="date" name="date">
<button id="fetch">Button</button>

JS:

const months = {"01":"Jan",
                "02":"Feb",
                "03":"Mar",
                "04":"Apr",
                "05":"May",
                "06":"Jun",
                "07":"Jul",
                "08":"Aug",
                "09":"Sep",
                "10":"Oct",
                "11":"Nov",
                "12":"Dec"};

let obj = {"key1":["abc","def"],"key2":[["123abc","saju242"]]};

function fetch(){
    return $.ajax({
                url: '/server.php',
                type: 'POST',
                dataType: 'json',
                contentType: 'json',
                data:{
                     "date": JSON.stringify(date_splitted[2]+" "+
                     months[date_splitted[1]]+", "+date_splitted[0]),
                     "obj": JSON.stringify(obj)
                },
                cache: false
    });
}

document.getElementById('fetch').addEventListener('click',async function(){
    let response = await fetch();
    alert(response);
})

PHP:

<?php
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    header('Access-Control-Allow-Credentials:',TRUE);
    header('Content-Type: application/json');

    echo json_decode(stripslashes($_POST["date"]));
    var_dump(json_decode(stripslashes($_POST["obj"])));
?>

When I execute the code, I keep getting an error,

Warning: Undefined array key “date”

Deprecated: stripslashes(): Passing null to parameter #1 ($string) of type string is deprecated

But I am sending the correct key => value pair. Why is my array key undefined? Please help me.

I wanted to connect versitka to my angular component.
I placed the version HTML file, my component in the html file and placed the image, css code, bootstrap code, js code in the assets file and gave a link to it.

Now everything seems to be fine, but when I run ng serve, only the html file works, css and images cannot be imported.

but if I make my html component goto live vs. code, it works. I don’t understand why it doesn’t work if I use Angular itself with ng serve?

it is worling goto live server 127.0.0.1 localhost
but not vorking
ng serve localhost 4200 – port why

I have tried to find a solution in many places but I can’t find it

even chatGPT couldn’t help.