Category: javascript

I have three forms on one page.

I need to change the value of specific form elements (on separate forms) when another form element changes.

Here is the basic function I’m trying to get to work. I believe my issue is in addressing the other elements requiring the change.

function myFunction(inp) {
  if(inp.id == "position") {
    document.getElementById("frmStripePayment").elements["position1"].value = inp.value;
    document.getElementById("frmNoPayment").elements["position2"].value = inp.value;
  }  
}

The data I need comes from a basic select box with an onchange function.

<select name="position" id="position" style="WIDTH: 150px" onchange="myFunction(this)" >

Any help would be appreciated! Thanks!

I’ve been trying to troubleshoot this for the past 2 days and not getting anywhere so I thought I’d reach out to the community.

My netlify (NextJS) site is:

https://illustrious-creponne-98438d.netlify.app/gallery

In this project I am using react-photo-swipe-gallery. This is the library I am having issues with.

When I run the site in local dev environment the gallery works fine:

Gallery icons showing in dev

However when I push it to Netlify the gallery buttons are missing (i.e. the previous image, next image and close icons).

Gallery icons not showing in production

If I inspect where the buttons should be I can see that the SVGs are getting malformed / non-existent:

Local:

Inspect element of icons showing in dev

Production:

Inspect element of icons not showing in production
When I debug the issue I can see it’s as if different code is being compiled by webpack.

Locally you can see that the code that generates the buttons simply appends the trailing svg tag: :

out += svgData.inner;
out += ‘’;

Code in dev

However when I’m in production that same code seems to not append and just overwrites (which is why the SVG element is malformed):

out = htmlData.inner + “”

Code in production

Furthermore, this code looks totally different to what i have in local dev environment.

I’m so confused, it’s like two entirely different libraries are getting loaded.

Here is my package.json:

{
“name”: “nextjs-starter-prismic-multi-page”,
“version”: “0.0.0”,
“private”: true,
“license”: “Apache-2.0”,
“author”: “Prismic [email protected] (https://prismic.io)”,
“scripts”: {
“dev”: “concurrently "npm:next:dev" "npm:slicemachine" --names "next,slicemachine" --prefix-colors blue,magenta”,
“next:dev”: “next”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”,
“slicemachine”: “start-slicemachine”,
“format”: “prettier --write .”
},
“dependencies”: {
“@fortawesome/fontawesome-svg-core”: “^6.2.1”,
“@fortawesome/free-solid-svg-icons”: “^6.2.1”,
“@fortawesome/react-fontawesome”: “^0.2.0”,
“@googlemaps/react-wrapper”: “^1.1.35”,
“@next/font”: “^13.0.7”,
“@prismicio/client”: “^6.7.1”,
“@prismicio/helpers”: “^2.3.6”,
“@prismicio/next”: “^1.0.0”,
“@prismicio/react”: “^2.5.0”,
“@prismicio/slice-simulator-react”: “^0.2.2”,
“aos”: “^2.3.4”,
“clsx”: “^1.2.1”,
“formik”: “^2.2.9”,
“next”: “^13.0.3”,
“rc-collapse”: “^3.5.2”,
“rc-motion”: “^2.6.3”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-photoswipe-gallery”: “^2.2.7”,
“swiper”: “^8.4.6”,
“yup”: “^0.32.11”
},
“devDependencies”: {
“@prismicio/types”: “^0.2.4”,
“@tailwindcss/aspect-ratio”: “^0.4.2”,
“autoprefixer”: “^10.4.13”,
“concurrently”: “^7.5.0”,
“eslint”: “^8.27.0”,
“eslint-config-next”: “^13.0.3”,
“node-fetch”: “^3.3.0”,
“postcss”: “^8.4.19”,
“prettier”: “^2.7.1”,
“prettier-plugin-tailwindcss”: “^0.1.13”,
“slice-machine-ui”: “^0.5.2”,
“tailwindcss”: “^3.2.4”
}
}

I’ve made sure that Nelify is using the same version of Node and NPM as I do locally using environment variables and I have confirmed I did this correctly in the build logs.

Any help greatly appreciated, my hair is going grey just trying to figure this out.

Let’s say I have 2 webpages: index.html (the login page) and home.html

Once a user successfully logs in on index.html and is authenticated with a sessionID, I want to navigate them to /home

Issue is: how exactly do I GET the home.html page? If I use fetch API/XHR, I can pass the sessionID and get the home.html webpage in response, BUT the url does not change to /home. So if the user refreshes the page, it takes them back to index.html. If I simply use window.href=”/home”, then my GET request is sent by the browser and it does not contain my sessionID, so I cannot authenticate the request at the server end…

Basically my questions are:

1. What is the best way to GET a new page? Ideally with the url reflecting the change in webpage and allowing for authentication
2. What is the best way to replace an existing page with the new page received as a response? I currently use document.write(response_html) which I think is not a good solution

What can I do to increase the static property length?

Symbol.length

My program works fine until I add the “use client” directive on feed.tsx. I want to change the behavior of scrolling in the Feed component, so I need to specify that it should be rendered client-side. However, this makes the page crash. If I temporarily remove the Image tag inside of cell.tsx, the program works again.

Here’s my code:

cell.tsx

import tempImg from "../../public/assets/image.png"
import Image from "next/image"

export default function Cell() {
  return (
    <>
      <div>Username</div>
      <Image src={tempImg} alt="temp img"/>
    </>
  );
}

feed.tsx

"use client";
import Cell from "./cell";

export default function Feed({numCells}) {
  const handleScroll = (e: any) => {
    console.log("scrolling")
  }

  return (
    <>
      <div onScroll={e => handleScroll(e)}>
        {Array.from({ length: numCells }, (_, index) => (
          <Cell key={index}/>
        ))}
      </div>
    </>
  );
}

The error I’m receiving is:

Unhandled Runtime Error
TypeError: __webpack_require__.n is not a function. (In '__webpack_require__.n(next_image__WEBPACK_IMPORTED_MODULE_3__)', '__webpack_require__.n' is undefined)

Thanks in advance

I am trying to get the register and login anchor tags to disappear when i sign in and the logout anchor to appear. Login and register stay on the page even after i sign in.

<div class="navbar-nav ms-auto">
      <% if (!currentUser) { %>
        <a class="nav-link" href="/login">Login</a>
        <a class="nav-link" href="/register">Register</a>
      <% } else { %>
      <a class="nav-link" href="/logout">Logout</a>
          <% } %>

I have access to currentUser through a middleware in express, where i assigned it to req.user

I am trying to get SP lists from web using the below code. but we also want to get list template using

public componentDidMount() {
      let reactcontexthandiler= this;
      jquery.ajax({
        url: `${GetSpLists.siteurl}/_api/web/lists?select=Title&$filter=Hidden eq false`,
        type:"GET",
         headers:{'Accept': 'application/json;odata=verbose;'},
         success : function (resultData){
          reactcontexthandiler.setState({sitecontents: resultData.d.results});
         },
         error: function (jqXHR, textStatus, errorthrown){
          }
        });
    }

/_api/web/ListTemplates/

Here we also want to get list template type, how can i add another rest call here in this same function ?
Or
please assist me how to call multiple rest calls in TSX file during the SPFX webpart

I clone this soure from github and deploy to azure cloud, but when i run cmd “azd up” it was shown the error as below

Could not resolve “./pages/layout/Layout” from “src/index.tsx”
file: D:C#OpenAIOpenAICustomKBappfrontendsrcindex.tsx
error during build:
RollupError: Could not resolve “./pages/layout/Layout” from “src/index.tsx”
at error (file:///D:/C%23/OpenAI/OpenAICustomKB/app/frontend/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
at ModuleLoader.handleInvalidResolvedId (file:///D:/C%23/OpenAI/OpenAICustomKB/app/frontend/node_modules/rollup/dist/es/shared/node-entry.js:24650:24)
at file:///D:/C%23/OpenAI/OpenAICustomKB/app/frontend/node_modules/rollup/dist/es/shared/node-entry.js:24612:26
(x) Failed: Packaging service backend

ERROR: failed packaging service ‘backend’: failed invoking event handlers for ‘prepackage’, ‘prepackage’ hook failed with exit code: ‘1’, Path: ‘C:UserslocnsoAppDataLocalTempazd-prepackage-825251035.ps1’. : exit code: 1

enter image description here

I google it but I newbie in nodejs so I dont know what dose error message mean?

I want to connect user’s wallet to discord.

The flow is like below.

At first I will create ‘wallet’ channel. And I type message that includes some link or button to connect meta mask chrome extension.

When an user enter ‘wallet’ channel then click link or button with user’s information(user id)

Then send meta mask public key and user id to my server.

My server use ethers.js to get crypto currency balance.

Finally my server grant level to user by balance.

Could you let me know the way or some materials?

I found this slide down menu on Codepen, https://codepen.io/roker2401993/pen/LNryKe and changed it so it would slide up from the bottom and then down (so I just reversed it) https://codepen.io/Qlutsz/pen/eYQeoPM

But when added it to my own HTML file;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="css/styles.css">
    <title>Hamburger Menu Tests</title>
</head>
<body>
    
    <div class="nav">
        <button type="button" title="Button" class="btn-nav">
            <span class="icon-bar top"></span>
            <span class="icon-bar middle"></span>
            <span class="icon-bar bottom"></span>
        </button>
    </div>
      
    <div class="nav-content hideNav hidden">
        
        <ul class="nav-list">
          <li class="nav-item"><a href="index.html" class="item-anchor">Home</a></li>
          <li class="nav-item"><a href="about.html" class="item-anchor">About</a></li>
          <li class="nav-item"><a href="projects.html" class="item-anchor">Projects</a></li>
          <li class="nav-item"><a href="contact.html" class="item-anchor">Contact</a></li>
        </ul>
        
        <div class="line-betwen"></div>
        
        <div class="social-links">
          <ul class="social-list">
            <li><a href="https://www.facebook.com/mitar.djakovic.7" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="https://rs.linkedin.com/in/mitar-djakovic-77490ab5" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
            <li><a href="mailto:[email protected]" target="_blank" title="Email"><i class="fa fa-envelope-o"></i></a></li>
            <li><a href="https://github.com/roker93" target="_blank" title="GitHub"><i class="fa fa-github"></i></a></li>
            <li><a href="https://codepen.io/roker2401993" target="_blank" title="CodePen"><i class="fa fa-codepen"></i></a></li>
          </ul>
        </div>
  
    </div>
<script src="js/burger.js"></script>
</body>
</html>

And this is the CSS

.social-links {
    text-align: center;
    position: relative;
    top: 130px;
  }
  
  .line-betwen {
    width: 15%;
    height: 3px;
    background-color: #F9B339;
    position: relative;
    left: 42.5%;
    top: 80px;
  }
  
  .social-list li{
    display: inline;
    text-align: center;
    font-size: 40px;
    margin-left: 10px;
    margin-right: 10px;
  }
  
  .social-list a {
    color: #fff;
  }
  
  .social-list a:hover {
    color:#F9B339;
  }
  .nav {
    position: relative;
    width: auto;
    display: inline-block;
    border: none;
  }
  
  .btn-nav {
    position: fixed;
    top: 30px;
    left: 30px;
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 99999;
  }
  
  .btn-nav:focus {
    outline: 0;
  }
  
  .icon-bar {
    display: block;
    margin: 6px 0;
    width: 35px;
    height: 5px;
    background-color: #F9B339;
  }
  
  .btn-nav:hover .icon-bar {
    background-color: #F9B339;
  }
  
  .nav-content {
    position: fixed;
    top: -100%;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.9);
    display: block;
    height: 100%;
    z-index: 9;
  }
  
  .below-line {
    width: 15%;
    height: 3px;
    background-color: #F9B339;
    position: relative;
    left: 42.5%;
    top: 40px;
  }
  
  .nav-list {
    list-style: none;
    padding: 0;
    position: relative;
    top: 10%;
  }
  
  .item-anchor:after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    left: 0;
    bottom: 0;
    z-index: 9;
    background: transparent;
   
  }
  
  .item-anchor {
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
    position: relative;
    text-decoration: none;
    padding: 10px;
    letter-spacing: 15px;
  }
  
  .item-anchor:hover,
  .item-anchor:focus {
    color: #F9B339;
   
  }
  
  .item-anchor:hover:after,
  .item-anchor:focus:after{
    width: 100%;
    background: #F9B339;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }
  
  .nav-item {
    margin: 40px auto;
    text-align: center;
  }
  
  .animated {
    display: block;
    margin: 0 auto;
  }
  
  .animated:hover .icon-bar,
  .animated:focus .icon-bar{
    background-color: #FCA311;
  }
  
  .animated:focus {
    cursor: pointer;
    z-index: 9999;
  }
  
  .middle {
    margin: 0 auto;
  }
  
  .icon-bar {
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    z-index: 999999;
  }
  
  .animated .icon-bar {
    z-index: 999999;
    background-color: #FCA311;
  }
  
  .animated .top {
    -webkit-transform: translateY(10px) rotateZ(45deg);
    -moz-transform: translateY(10px) rotateZ(45deg);
    -ms-transform: translateY(10px) rotateZ(45deg);
    -o-transform: translateY(10px) rotateZ(45deg);
    transform: translateY(10px) rotateZ(45deg);
  }
  
  .animated .bottom {
    -webkit-transform: translateY(-11px) rotateZ(-45deg);
    -moz-transform: translateY(-11px) rotateZ(-45deg);
    -ms-transform: translateY(-11px) rotateZ(-45deg);
    -o-transform: translateY(-11px) rotateZ(-45deg);
    transform: translateY(-11px) rotateZ(-45deg);
  }
  
  .animated .middle {
    width: 0;
  }
  
  @keyframes showNav {
    from {
      top: 100%;
    }
    to {
      top: 0;
    }
  }
  
  @-webkit-keyframes showNav {
    from {
      top: -100%;
    }
    to {
      top: 0;
    }
  }
  
  @-moz-keyframes showNav {
    from {
      top: -100%;
    }
    to {
      top: 0;
    }
  }
  
  @-o-keyframes showNav {
    from {
      top: -100%;
    }
    to {
      top: 0;
    }
  }
  
  .showNav {
    -webkit-animation: showNav 1s ease forwards;
    -moz-animation: showNav 1s ease forwards;
    -o-animation: showNav 1s ease forwards;
    animation: showNav 1s ease forwards;
  }
  
  @keyframes hideNav {
    from {
      top: 0;
    }
    to {
      top: 100%;
    }
  }
  
  @-webkit-keyframes hideNav {
    from {
      top: 0;
    }
    to {
      top: -100%;
    }
  }
  
  @-moz-keyframes hideNav {
    from {
      top: 0;
    }
    to {
      top: -100%;
    }
  }
  
  @-o-keyframes hideNav {
    from {
      top: 0;
    }
    to {
      top: -100%;
    }
  }
  
  .hideNav {
    -webkit-animation: hideNav 1s ease forwards;
    -moz-animation: hideNav 1s ease forwards;
    -o-animation: hideNav 1s ease forwards;
    animation: hideNav 1s ease forwards;
  }
  
  .hidden {
    display: none;
  }

And this is the little bit of JS (I am still learning JS)

$(window).load(function() {
    $(".btn-nav").on("click tap", function() {
      $(".nav-content").toggleClass("showNav hideNav").removeClass("hidden");
      $(this).toggleClass("animated");
    });
  });

I am not exactly sure what I am doing wrong, I did link the CSS and JS files within the HTML file.
I have checked everything a bunch of times, but I am not sure what I am missing, I was hoping maybe someone could please help me figure out why it works on Codepen, but not on my local (VSCode Live Server)

I have tried to create this effect on my local host (using VSCode Live Server), I liked the CSS and the JS. Not sure what I am doing wrong, the CSS is linked correctly because I did change the color of the hamburger “bars” with success.

When I click on the hamburger nav bars – nothing happens, at all. But on Codepen, it works correctly and how I want it to work. I just cannot seem to get it to work correctly on my local end.

(I apologize this is my first serious post on Stackoverflow asking for help, so if I did not do or say something correctly, please let me know)

const arr1 = [[-1,-1,-1],[-1,-1,-1],[-1,-1,-1]];
const arr2 = [[2,6,2],[-1,2,2],[6,2,-1]];
const num = 3

I have such a requirement, I hope that after num times, the array arr 1 will gradually become the array arr 2, but I hope that the filling data will change from more to less.

For example, I don’t want this kind of situation where only one value is filled for the first time

[-1, -1, -1, -1, -2, -1, -1, -1, -1]

Hope to fill as many data as possible for the first time, as shown below

[2, 6, 2, -1, 2, -1, ,6, -1, -1]

let a = [[-1, -1, 2], [6, 2, 2], [2, 2, 2]]
let time = 3
let tiling = a.reduce((pre, cur) => {
  return pre = pre.concat(cur)
}, [])



function generateArrays() {
  const pool = [0, 1, 2, 3, 4, 5, 6, 7, 8];
  const arrays = [];

  for (let i = 0; i < time; i++) {
    const array = [pool[i]];
    pool.splice(i, 1);
    arrays.push(array);
  }

  while (pool.length > 0) {
    const randomIndex = Math.floor(Math.random() * arrays.length);
    const randomArray = arrays[randomIndex];
    const randomValueIndex = Math.floor(Math.random() * pool.length);
    const randomValue = pool[randomValueIndex];
    randomArray.push(randomValue);
    pool.splice(randomValueIndex, 1);
  }

  return arrays;
}

const arrays = generateArrays();
console.log(arrays);
let newArr = [[-1, -1, -1], [-1, -1, -1], [-1, -1, -1]]
let res = []
for (let v of arrays) {


  for (let i of v) {
    let t = 0
    let j = 0
    const val = tiling[i]
    if (i <= 2) {
      j = 0
      newArr[j][i] = val
    } else if (i <= 5) {
      j = 1
      t = i - 3
      newArr[j][t] = val
    } else if (i <= 8) {
      j = 2
      t = i - 6
      newArr[j][t] = val
    }
  }
  console.log(JSON.parse(JSON.stringify(newArr)))
  res.push(JSON.parse(JSON.stringify(newArr)))
}
console.log(res)

this code works but it doesnt guarantee that the first fill will be the most

I have a window with a form in it and pops up on click of an item in the grid. Inside the window, there is an edit button that would make the fields to setReadOnly(false). Here is the button:

onEdit: function () {

    this.moviePopupWindow = Ext.create('MovieRental.view.MovieDetailsPopUpView');
    this.movieForm = this.moviePopupWindow.down('#movieForm');
    var saveButton = this.movieForm.down('[itemId="saveBtn"]');
    var selected = localStorage.getItem('formValues');


    this.movieForm.down('[name="Title"]').setReadOnly(false);
    this.movieForm.down('[name="Genre"]').setReadOnly(false);
    this.movieForm.down('[name="Description"]').setReadOnly(false);
    this.movieForm.down('[name="Status"]').setReadOnly(false);
    this.movieForm.down('[name="Price"]').setReadOnly(false);

    this.moviePopupWindow.updateLayout();
    saveButton.setDisabled(false);
    console.log(localStorage.getItem('formValues'));
},

However, the fields is still in readonly even though the button is pressed.
I tried showing the window again and although it is editable, the values of the form is gone (the form is pre-filled with the data from the grid). And the previous form is still showing.

Here are the things I tried:

~ .updateLayout() – not working. no error in console.
~ I tried to close the previous window and open a new one but no luck. For some reason, the .close() is not working. .destroy() is also not working.

I know its a sounds simple, but I’m really stuck here. Any ideas?

I’m about to update Arcgis from version 3 to 4.27 but don’t have any idea how can I convert the below function:

function InfWindow(point, screenPoint) {
var qtLGA = new esri.tasks.QueryTask(WaterConnectMapServerURL + "/16/");
var qLGA = new esri.tasks.Query();

qtLGA.requestTimeout = 180;
qLGA.requestTimeout = 180;

qLGA.returnGeometry = false;
qLGA.outFields = ["ABBNAME"];
qLGA.geometry = point;
var qLGADefer = qtLGA.execute(qLGA);

var identifyTask = new esri.tasks.IdentifyTask(FloodMapServerURL);
identifyTask.requestTimeout = 180;
var identifyParams = new esri.tasks.IdentifyParameters();
identifyParams.tolerance = 0;
identifyParams.returnGeometry = false;
identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
identifyParams.width = map.width;
identifyParams.height = map.height;
identifyParams.geometry = point;
identifyParams.mapExtent = map.extent;
var identifyDefer = identifyTask.execute(identifyParams);

map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));
map.infoWindow.setTitle("Loading...");
map.infoWindow.setContent("");

var promises = new all([qLGADefer, identifyDefer]);
promises.always(function (results) {
var infContent = [];
infContent.push("<table class='tblInfoWindow'>");
infContent.push("<tr class='tblInfoWindowTrHeader'>");
infContent.push("<th>Study</th>");
infContent.push("<th class='th-Internal-Pad'>Layer</th>");
infContent.push("<th class='th-Internal-Pad'>Depth&nbsp;Range&nbsp;(m)</th>");
infContent.push("</tr>");

for (var i = 0; i < results.length; i++) {
if (results[i].features != null) {
if (jQuery.isEmptyObject(results[i].features)) {
map.infoWindow.setTitle("Outside Local Council Area");
}
else {
map.infoWindow.setTitle(results[i].features[0].attributes.ABBNAME);
}
}

if ($.isArray(results[i])) {
if (results[i].length == 0) {

}
for (var j = 0; j < results[i].length; j++) {
infContent.push("<tr class='tblInfoWindowTrData'>");
infContent.push("<td>" + IDtoLabel[results[i][j].layerId] + "</td>");
infContent.push("<td class='td-Internal-Pad'><a title='Turn on layer' href='javascript&colon;void(0)' class='LayerLink " + results[i][j].layerId + "'>" + results[i][j].layerName + "</a></td>");
if (results[i][j].displayFieldName.toUpperCase().indexOf("RANGE") != -1)
infContent.push("<td class='td-Internal-Pad'>" + results[i][j].value + "</td>");
else
infContent.push("<td class='td-Internal-Pad'>Extent only</td>");
infContent.push("</tr>");
}
}
}
infContent.push("</table>");
map.infoWindow.resize(400, 200);
var infContentJoined = infContent.join('');
if (infContentJoined.indexOf("tblInfoWindowTrData") == -1) {
map.infoWindow.setContent("No study data available at this location. Searching nearby...");
SearchWithTolerance(point);
}
else {
map.infoWindow.setContent(infContentJoined);
$(".tblInfoWindow").find("img.pdfIcon_layer").click(function () {
var layerID = $(this).attr("id").replace("img_layer", "");
OpenPDFLink(layerID);
});
$(".tblInfoWindow").find("img.Question").click(function () {
var layerID = $(this).attr("id").replace("question_layer", "");
var layerName = $.trim($(this).parent().text());
OpenQuestionLink(layerID, layerName);
});
$(".LayerLink").click(function () {
var $tree2 = $("#tree2");
var layerId = parseInt($(this).attr("class").replace("LayerLink ", ""), 10);
var node = $tree2.tree('getNodeById', layerId);
if (node) {
$tree2.tree('openNode', node.parent, false);
$tree2.tree('selectNode', node);
DisplayFeature(null, null, layerId, FloodMapServerURL);

if ($("#chkChangeExtent").prop("checked")) {
SetMapExtent(node.parent.extent);
}
$(this).closest("table").find("tr.tblInfoWindowTrSelected").removeClass("tblInfoWindowTrSelected");
$(this).closest("tr").addClass("tblInfoWindowTrSelected");
}
});
}
});
}

QueryTask exixsts in the new version but IdentifyTask has been removed and the replacement is “esri/rest/identify”.

I used identify based on the sample https://codepen.io/pen?editors=1010 and rewrote the code got “promise” error. How can I write the code in Arcgis version 4.x? What is the replacements?

I was browsing posts about how to set up the camera and many of them mentioned the lookAt function. When I go to THREE.js documentation I can’t find the method. Where did it go? What should I do in place of the lookAt function?

I only found a lookAt method for Object3D: https://threejs.org/docs/#api/en/core/Object3D.lookAt, which does not satisfy the purpose.

I saw many examples of web components and everyone used template tags to draw screens. Is there a reason to use template tags instead of tags like <div> or <section>?

this is my sample code !

enter image description here