Category: javascript

So I am trying to render some data from a json file in react js, but when I try to run it, it always show an error that it cannot read the parent of a certain data from the json because it’s undefined even though I am sure that I put it right.

Json file:

{
    "item": [
        {
            "name": "item"
        }
    ]
}

Code:

const main = ({ backEndData }) => {
  return (
    <div className='main'>
        {
            backEndData.items.item.forEach(product => {
                return (
                    <p>{product.name}</p>
                )
            })
        }
    </div>
  )
}

Error:

I am getting the json file from my backend server btw

im new Redux/React-Reduct user. i have simple like and dislike apps.

my problem :

1. when i press “Reset All” it only reset my globalState.
2. this also happen when i press “Dislike” (Button on top right) its only affect with my globalState.

my goal :
what i want is , when i press “Reset All” & “Dislike” (Button on top right) my localState also updated from globalState.

my Code :

const Frame = ({photo}) => {
  const globalState = useSelector(state => {
    return state;
  });
  const dispatch = useDispatch();

  const [localState, setLocalState] = useState({
    localCounter: 0,
  });

  const likeSum = () => {
    const sum = globalState.counter + localState.localCounter;
    return sum;
  };

  return (
    <View style={styles.container}>
      <ImageFrame photo={photo} />
      <View style={styles.buttonContainer}>
        <CustomButton title={`${likeSum()} like`} mode="mini" type="like" />
        <Gap width={60} />
        <CustomButton
          title="like"
          mode="mini"
          type="primary"
          onPress={() =>
            setLocalState({
              localCounter: localState.localCounter + 1,
            })
          }
        />
        <Gap width={10} />
        <CustomButton
          title="dislike"
          mode="mini"
          type="danger"
          onPress={() => {
            if (localState.localCounter > 0) {
              setLocalState({
                localCounter: localState.localCounter - 1,
              });
            }
          }}
        />
      </View>
    </View>
  );
};

my redux store :

const intialState = {
  counter: 0,
};

const reducer = (state = intialState, action) => {
  if (action.type === '_INCREASE_COUNTER') {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === '_DECREASE_COUNTER') {
    if (state.counter > 0) {
      return {
        counter: state.counter - 1,
      };
    }
  }
  if (action.type === '_RESET_COUNTER') {
    return {
      counter: 0,
    };
  }
  return state;
};

const store = createStore(reducer);

export default store;

sample screenshot my App:

Please advise or which is better approach to solve this issue , thank you so much for your concer.

I’ve tried to use Firebase login with JWT security. But I can’t do this. what should I do now?

I am using the below img tag in my React component but the image is not displaying when I am taking the image source from a local path.

<img class="masthead-avatar mb-5" src="public/css/avataaars.svg" alt="..." />

i am trying to understand array sorting method , the problem i am currently facing is when i am declaring some variables inside compare function its not sorting the same as it is doing without those variables although those variables are not used anywhere

can anyone explain what is actually happening here

also i find out that sort functions behave different in firefox and chrome
page_link i am testing this in firefox dev edition

let list = ["a","b","c","d","e","f","g","h","i"]

list.sort((a,b)=>{
    let pat = ["d","a"]
    return b - a
})
console.log(list) // Array(9) [ "a", "b", "c", "d", "e", "f", "g", "h", "i" ]

list.sort((a,b)=>{
    // let pat = ["d","a"]
    return b - a
})
console.log(list) // Array(9) [ "i", "h", "g", "f", "e", "d", "c", "b", "a" ]

I have a problem with binding into property to get html and translate it. I have an innerHTML that i am trying to map to translate. The problem is it is not translating and displaying the key as it is. Please help. Below is my code :-

let popupContainer = document.createElement('div');
popupContainer.innerHTML = require('html-loader!../html/myPopup.html').default;
popupContainer.addEventListener('click', clickEventHandler);
document.body.appendChild(popupContainer);

It does not translate and displays as below :- {{'user-key-label' | translate}}

I’d like to handle dragend events differently depending on whether an element has been just dragged inside the browser window (or site resp.) or or outside, e.g. to an external file manager.

After I didn’t find any attribute of the DragEvent instance indicating whether it’s inside or outside the sites context I started to arithmetically figure out if the corresponding mouse event still takes place inside the geometry of the site.

Eventually I might succeed with that approach (currently not working yet) but it has one major disadvantage (leaving alone its ugliness): the drop target window might be on top of the browser, so the geometry is no real indicator at all..

so.. how do I find out if a dragend (or any other event I could use to store some state) is pointing outside of the browser window (or source site)?

I’m writing a chrome extension and from that extension i want to click on a particular anchor tag in a webpage on a particular website.

let helpRequestButton = document.querySelectorAll(".live-doubt-item-resolve.ng-scope a");

Using this query selector i’m able to get the anchor tag from the web page which looks like.

<a data-ga-label="resolve_now_live" data-ga-action="clicked" ng-if="helpRequestObj.item_type === 'Topic'" ng-click="claimLiveRequest($event, true, helpRequestObj.id)" target="_blank" class="content-heading ng-scope" data-ga-category="HelpRequestDashboardLive"> </a>

I just want to click on this tag using java script.
But helpRequestButton.click() dosent work.
I have tried the same solution with jQuery(did’nt work).
Also i tried to search a lot on web on how to simulate a mouse click and none of the solutions worked uptill now.

Just for refrence i’m giving the code snippet of my extension what chrome would call one the webpage is loaded. The button which i have to click is present on the web page.

let timeOut;

function stopTimeout() {
    clearTimeout(timeOut);
}

function checkIncomingHelpRequests() {
    let helpRequestButton = document.querySelectorAll(".live-doubt-item-resolve.ng-scope a");
    console.log(helpRequestButton[0]);
    if (helpRequestButton.length > 0) {
       

> ***// This is the place i want to click the button.***

        // helpRequestButton.
        //helpRequestButton.click();
    }
}

function selectTag() {
    // var object = document.querySelector(".main-class");
    // console.log(object);
    let liButton = document.querySelectorAll(".pointer.tab.ga-event-tracker")[0];
    //let liButton = $("li.pointer.tab.ga-event-tracker")[0];
    //console.log(liButton);
    if (liButton !== undefined) {
        liButton.click();
        checkIncomingHelpRequests();
    }
    timeOut = setTimeout("selectTag()", timeOutInterval);
}

$(document).ready(function () {
    selectTag();
});

Please help me. Thanks in advance.

Good day people, I wrote a javascript code to add a countdown timer to the todo list app I am currently working on but the code is not working and I am not getting any errors. I am a beginner trying to learn on projects but I am currently stuck at this point below are the templates
I will appreciate suggestions on how to solve the problem
BASE.html

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var options = {'format':'yyyy-mm-dd',}
        var elems = document.querySelectorAll('.datepicker');
        var instances = M.Datepicker.init(elems,options);
       
      });
      const whenb=document.getElementById('when')
      console.log(whenb.textContent)
      const countdown=document.getElementById('count_down')
      const date=Date.parse(whenb.textContent)
      setInterval(()=>{
        const now= new Date().getDate()
        const diff=whenb-now
        const d= Math.floor(date/(1000*60*60*24)-now/(1000*60*60*24)) 
        const h=Math.floor((date/(1000*60*60)-now/(1000*60*60))%24)
        const m=Math.floor((date/(1000*60)-now/(1000*60))%60)
        const s=Math.floor((date/(1000)-now/(1000))%60)
        if (diff>0){
        count_down.innerHTML=d+"days,"+" "+h+"hours,"+" "+ m+"minutes,"+" "+s+"seconds left...  "
      }
      },1000)
      </script>
    <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>todolist</title>
</head>
<body>
    <nav>
        <div class="container">
            <div class="nav-wrapper">
                <a href="#" class="brand-logo">To-do-List</a>
            </div>
        </div>
      </nav>
{% block content %} 
{% endblock content %}
</body>
</html>

INDEX.html

{% extends "base.html" %}
{% load static%}

{% block content %}

<div class="container">
    <div class="row">
        <form action="add_todo/" method="post">
            <div class="input-field col s6">
                <input type="text" name="content" >
                <label for="todo" class="add">Add Item</label>
            </div>
           <div class="input-field right" >
                <i class="material-icons prefix">today</i>
                <input type="text" class="datepicker" name="date">
            </div>
            <div>
                <input type="submit" value="Add" style="display: inline-block; width: 10%; background-color: rgb(51, 51, 218);
                height: 35px;
                width: 60px;
                border-radius:10%;
                margin-top: 30px;
                padding: 5px;">
           </div>
        </form>
    </div>
    <div class="container">
        {% for items in todo_items %}
        <ul class="collection">
            <li class="collection-item">{{items.item}}
                <div class="right " id="when">Due:{{items.due|date:'d-m-Y'}}</div>
                <div class="right" id="count_down"></div>
                <div class="right">
                    <form action="delete_todo/{{items.id}}/" method="post">
                            
                        <input type="submit" value="Delete" style="display: inline-block; width: 10%; background-color: rgb(179, 65, 57);
                        height: 35px;
                        width: 60px;
                        border-radius:10%;
                        margin-top: -7px;
                        padding: 5px;">
                    </form>
                </div>
            </li>
            
          </ul>
        {% endfor %}
    </div>
    
</div>

{% endblock content%}



   

I’m a bloody beginner at this,so please don’t judge me,ok?
So I made a Website with this text field:

Text: <input type="text" name="text" value="" id="input1"/>

And I made a button,used to get the input of the Text field:

<input type="submit" onclick=getinput>

and this is the getinput()-function:

      <script>
        function getinput(){
          const val = document.querySelector('input1').value;
          console.log(val);
          console.log("No error in function implement.");
        }
      </script>

but I generated the following error:

VM195:3 Uncaught TypeError: Cannot read properties of null (reading 'value')
    at <anonymous>:3:45

I don’t know what this error means,and how to fix it,could someone please help me?

Hi I want to replace a div that is already displayed with another Hidden div choosed when i click on one of them(3 other divs(hidden) initially). the 4 links related to the 4 divs and in same way i can do that in each link clicked. below is the code:

                  <script type="text/javascript">
                      var models = document.getElementById('models')
                      var geometry = document.getElementById('geometry')
                      var assembly = document.getElementById('assembly')
                      var loads = document.getElementById('loads')
                      var models1 = document.getElementById('models1')
                      var geometryy = document.getElementById('geometryy')
                      var assemblyy = document.getElementById('assemblyy')
                      var loads1 = document.getElementById('loads1')
                      geometryy.addEventListener("click", function () {
                        models.style.display = "none"
                        loads.style.display = "none"
                        assembly.style.display = "none"
                        geometry.style.display = "block"
                      })
                
                      assemblyy.addEventListener("click", function () {
                        geometry.style.display = "none"
                        assembly.style.display = "none"
                        loads.style.display = "none"
                        assembly.style.display = "block"
                      })
                      loads1.addEventListener("click", function () {
                        geometry.style.display = "none"
                        models.style.display = "none"
                        assembly.style.display = "none"
                        loads.style.display = "block"
                      })
                      models1.addEventListener("click", function () {
                        models.style.display = "block"
                        geometry.style.display = "none"
                        assembly.style.display = "none"
                        loads.style.display = "none"
                      })
                    </script>

CSS:

<style>
  #loads { 
    display: none;
  }
  #geometry { 
    display: none;
  }
  #assembly { 
    display: none;
  }
  #models {
    display: block;
  }

But it doesn’t give me any result!

Me pediram pra fazer as somas dos arrays:

const lista = [1, 4, 9, 18]

let soma = 0;

for(let x = 0; x < lista.length; x++) {
    soma += lista[x];
}
console.log(soma)

resultado:

32

até ai tudo bem e tambem pediu pra fazer uma com string:

const lista = [1, '4', 9, 18]

let soma = 0;

for (let x = 0; x < lista.length; x++) {
    soma += lista[x];
}
console.log(soma)

Resultado:

14918

Tentei usar parseInt

const lista = [1, '4', 9, 18]
let novoArr = parseInt(lista[1])

let soma = 0;

for (let x = 0; x < lista.length; x++) {
    soma += lista[x];
}
console.log(soma)
console.log(novoArr)

é possivel aplicar essa mudança na lista?

I have 3 component files and a CSS one, but for some reason, Tiles are moving a little bit to the top left.

it’s not giving me any error but when I use the view grid feature in firefox, it appears that tiles aren’t in the cells, and the Tile on the top left corner appears smaller than every other tile

here is the code:

App.jsx:

import React from 'react';
import tilesPacked from './assets/Tilemap/tiles_packed.png';
import mapjson from './assets/map.json';
import { Map } from './components/map.jsx';

export default function App() {
    let root = document.querySelector(':root');
    root.style.setProperty(
        '--factor',
        (window.innerWidth / 64 / 16 + window.innerHeight / 32 / 16) / 2
    );
    return (
        <div className="App">
            <Map src={tilesPacked} json={mapjson} className="map" />
        </div>
    );
}

map.jsx:

import react from 'react';
import { Tile } from './tile.jsx';

export class Map extends react.Component {
    render() {
        return (
            <div className="Map">
                {this.props.json.layers[0].data.map((tile, i) => {
                    return (
                            <Tile
                                key={i}
                                src={this.props.src}
                                x={tile % 12}
                                y={Math.floor(tile / 12)}
                            />
                    );
                })}
            </div>
        );
    }
}

tile.jsx:

import React from 'react';

export class Tile extends React.Component {
    render() {
        return (
            <img
                src={this.props.src}
                alt=""
                className={`tile${this.props.aClass ? ' ' + this.props.aClass : ''}`}
                style={{
                    objectPosition: `${(this.props.x - 1) * -16}px ${this.props.y * -16}px`,
                }}
            />
        );
    }
}

index.css:

:root {
    --factor: 4;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.tile {
    height: 16px;
    width: 16px;
    object-fit: none;
    transform: scale(var(--factor));
    image-rendering: pixelated;
}
.Map {
    display: grid;
    grid-template-columns: repeat(64, calc(var(--factor) * 16px));
    grid-template-rows: repeat(32, calc(var(--factor) * 16px));
}
body{
    overflow: hidden;
    width: 100%;
    height: 100%;
}

Hi I created a website to go to other websites within the website i made so as to bypass Device manager applications. It was mainly made for research so that people who need to go to websites blocked by the Device manager applications can access them through my website. I now need to control it so that it only works after school hours and during break time. The script is not able to run in the background and is only checked once. Below is the script for my code:

let d = new Date();
//alert(d);

let hrs = d.getHours();
let min = d.getMinutes();
let day = d.getDay();
//let auth = false
//const sec = d.getSeconds();
//alert(hrs);
//alert(min);
function pass() {
  return prompt("Enter Password:", "Unlocked during 10:40am to 11:20am GMT+0800 (Singapore Standard Time)");
}
function word() {
while (true) {
    if (pass() == "void") {
        //auth = true;
        break
    }else{
        alert("invalid password")
        
    }
}
}
function breaks() {
    if (hrs == 10 && min >= 40) {
        return true
    }else if (hrs == 11 && min < 20) {
        return true
    }else {
        return false
    }
}
if (hrs >= 14 || hrs < 8 || breaks() == true|| day == 0 || day == 6 /*|| auth == true*/){
    //alert("pass not needed");
    
}else {
    alert("You are using this website during school hours. Pls enter the password to bypass. Current time: " + d);
    word();
}

That is the script that needs to run in the background of this code (It’s a PWA by the way) :

<!DOCTYPE html>
<html lang="en">
<style>
body {
  background-color: #2C2F33;
}
</style>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Azlan's iframe Browser">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0, no-store">
  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title> Iframe Browser </title>
  <link rel="canonical" href="https://azlancoding.github.io/iframe-browser-pwa/" />
  <link rel="manifest" href="/iframe-browser-pwa/manifest.webmanifest">
  <meta name="keywords" content="bypass, school, browser in website, cloud browser">
  <link rel="stylesheet" href="css/styles.css">
  <title> iFrame browser </title>
  <script language="javascript">
    function setCookie(c_name,value,exdays){
        var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
        document.cookie=c_name + "=" + c_value;
    }

    function getCookie(c_name){
        var c_value = document.cookie;
        var c_start = c_value.indexOf(" " + c_name + "=");
        if (c_start == -1){
            c_start = c_value.indexOf(c_name + "=");
        }
        if (c_start == -1){
            c_value = null;
        }
        else{
            c_start = c_value.indexOf("=", c_start) + 1;
            var c_end = c_value.indexOf(";", c_start);
            if (c_end == -1){
                c_end = c_value.length;
            }
            c_value = unescape(c_value.substring(c_start,c_end));
        }
        return c_value;
    }

    checkSession();

function checkSession(){
   var c = getCookie("visited");
   if (c === "yes") {
     alert("Welcome back! Make sure you have your extension on.");
   } 
    else {
    ext_install();
   }
}
function ext_install() 
    {
  if (window.confirm('An extension is required for this website to work. Do you want to install it now?')) 
   {    
        setCookie("visited", "yes", 365)
        window.location.href='https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe';
        };
  };

function checkCookie() {
  let user = getCookie("alerted");
  if (user != "") {
    alert("Welcome again !");
    } else 
    {ext_install();}
    
}
   //document.getElementById("myIframe").src = "https://wwf.org";
   var iframe = document.getElementById("myIframe");
   //var website = iframe.src;
   //console.log(website);
   document.addEventListener("scroll", function(event) 
   {
    var style = document.getElementById("myIframe").style;
    style.webkitTransform = style.webkitTransform ? "" : "scale(1)";
   })
   /*function resizeIframe()
   {
    document.getElementById('myIframe').height = 100%;
   }*/
   function ResetBox()
   {
   if(document.getElementById("URL").value == '')
   {document.getElementById("URL").value='Enter a URL here';};
   }
   function LoadPage()
   { 
     var objFrame=document.getElementById("myIframe"); 
     objFrame.src=document.getElementById("URL").value;
   }
   var elem = document.documentElement
   function openFullscreen() {
     if (elem.requestFullscreen) 
     {
        elem.requestFullscreen();
     }
     else if (elem.webkitRequestFullscreen) { 
        elem.webkitRequestFullscreen();
     }
     else if (elem.msRequestFullscreen) { 
        elem.msRequestFullscreen();
     }
   }
   function closeFullscreen() {
     if (document.exitFullscreen) 
     {
        document.exitFullscreen();
     } 
     else if (document.webkitExitFullscreen) 
     {
        document.webkitExitFullscreen();
     } 
     else if (document.msExitFullscreen) 
     {
       document.msExitFullscreen();
     }
   }
  </script>
  <style>
  .iframe-container {
    overflow: hidden;
    /* 16:9 aspect ratio */
    padding-top: 56.25%;
    position: relative;
  }
  </style>
</head>
<body style="background-color:#2C2F33">
<div style="Clear:both;"> 
 <input type="text" value="https://www.google.com" class="frmUrlVal" ID="URL"onfocus="if (this.value == 'Enter a URL here') {this.value='https://'}" onblur="if (this.value == 'https://' || this.value == 'http://') { this.value='Enter a URL here';}">
 <input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
 <input type="button" VALUE="&#65513"  onClick="history.back()"> 
 <input type="button" VALUE="&#65515"  onClick="history.forward()"> 
 <input type="button" class="fullscreen" value="&#x26F6;" onclick="openFullscreen()">
 <input type="button" class="Exitfullscreen" value="Exit Fullscreen" onclick="closeFullscreen()">
 <button class="newWindow" onclick=" window.open('https://azlancoding.github.io/iframe-browser-pwa/','_blank')">New Window</button>
 <button class="cloudbrowser" onclick=" window.open('https://replit.com/@azlancoding/free-and-unlimited-cloud-browser?embed=true','_blank')">Cloud browser</button>
</div>
<iframe align="center" width="100%" height="95%" src="https://www.google.com" onload = "check()" onerror"ext_install" allow="camera;microphone" frameborder=yes loading ="lazy" name="myIframe" id="myIframe"> </iframe>
<script>
function check(){
  document.getElementById("URL").value = "Enter a URL here";
}
</script>
  <script>
      if (navigator.serviceWorker) {
        navigator.serviceWorker.register (
          '/iframe-browser-pwa/sw.js',
          {scope: '/iframe-browser-pwa/'}
        )
      }
  </script>
  <script src="js/app.js"></script>
</body>
</html>

My github project is https://github.com/AzlanCoding/iframe-browser-pwa

I tried using web workers but they can’t show alert boxes.

The checkbox is displayed if added simply to html, if added via useState, then it is not visible. Please tell me how to add an element to the page correctly so that it is displayed correctly and in the future I can interact with it. I checked that the element is present in the code, when hovering through the Elements Chrome Console, the area occupied by the checkbox is highlighted

        const getAllProducts = useCallback(async () => {
            const allProductsData = await request('/api/cp/getAllProducts', 'POST', {})
            const packagesKeys = Object.keys(allProductsData)

            const htmlTableData = packagesKeys.map((data, index) => {
                return(
                    <>
                        <tr>
                            <td>{index + 1}.</td>
                            <td colSpan={3}>{data}</td>
                            <td>Стандартная цена</td>
                            <td>Добавить в пакетное предложение:</td>
                        </tr>
                        {allProductsData[data].map((row) => {
                            return(
                                <tr
                                    key={"tr-" + row._id + "-" + index}
                                >
                                    <td><input type="checkbox" /></td>
                                    <td>{row.name}</td>
                                    <td>Counts</td>
                                    <td>Ind price</td>
                                    <td>Standard price</td>
                                    <td>Choose package</td>
                                </tr>
                            )
                        })}
                    </>
                )
            })
            setHtmlTable(htmlTableData)
        }, [request, setHtmlTable])

        useEffect(() => {
            getAllProducts().then()
        }, [getAllProducts])

        useEffect(() => {
            window.M.updateTextFields()
            window.M.AutoInit()
        }, [])

        return (
            <div className="row">
                <p>
                    <label>
                        <input type="checkbox" onChange={showIndPriceClient} />
                        <span>Показать Клиенту индивидуальные цены</span>
                    </label>
                </p>
                <p>
                    <label>
                        <input type="checkbox" onChange={showIndPriceClient} />
                        <span>Отображать в соответствующих полях  установленные в этом КП индивидуальные цены во всех последующих КП как изначальные</span>
                    </label>
                </p>
                <div className="input-field col s8">
                    <select>
                        <option value="" disabled>Доп. отображение цен в валютах</option>
                        <option value="1">- в рублях (Россия)</option>
                        <option value="2">- в Тенге (Казахстан)</option>
                        <option value="3">- в Долларах (США)</option>
                        <option value="4">- в Рублях + Долларах</option>
                        <option value="5">- в Рублях + Тенге</option>
                    </select>
                </div>
                <div className="input-field col s4">
                    <a className="waves-effect waves-light btn">Очистить всё</a>
                    <p>
                        Итоговая сумма КП:
                    </p>
                    <p>
                        0 руб.
                    </p>
                    <a className="waves-effect waves-light btn">Сохранить</a> <br/>
                    <a className="waves-effect waves-light btn">Ссылка на PDF</a>
                </div>
                <table id="products">
                    <tbody>
                    {htmlTable}
                    </tbody>
                </table>
            </div>
        )

Attached a screenshot for clarity

What’s my mistake?