Category: javascript

I have a simple form in a modal. Saving the form does not reload the page. Instead I simply close the modal and update the text on the page to reflect the changes made in the form.

When the user closes the modal without saving the form, I want to reset any changes they made to the form. Note the close buttons have the type “reset”:

  <div class="modal-dialog">
    <div class="modal-content">
     <form id='myForm' onsubmit='return false;' action='someTarget'>
      <div class="modal-header mb-3">
        <h5 class="modal-title">My Modal</h5>
        <button class="btn-close" data-bs-dismiss="modal" type="reset" aria-label="Close"></button>
      </div><!-- end .modal-header -->
      <div class="modal-body mt-3">
        <div class="row">
          <label class="col-4 col-form-label">Name</label>
          <div class="col-8 col-form-label"><input class="form-control" name="name" type="text" /></div>
          <div class="col-12 d-flex justify-content-end mt-4">
            <button class="btn btn-label-secondary me-sm-3 me-1" data-bs-dismiss="modal" type="reset" aria-label="Close">Cancel</button>
            <button class="btn btn-danger btn-animated-submit" type="submit"><span class="tf-icon bx bx-trash bx-s me-2"></span> Save</button>
          </div>
        </div><!-- end .row -->
      </div><!-- end .modal-body -->
     </form>
    </div><!-- end .modal-content -->
  </div><!-- end .modal-dialog -->
</div><!-- end .modal#exampleModal -->```


However, if the user makes changes to the form and saves it, only to open and close it again later - thus resetting the form - the form reverts to its original state prior to saving.

How I can change the form's "default" state when saving so that when the reset event is triggered, it reverts to the values of the last submitted state - not the one from when the page first loaded?

I built a Shopify app and extension using the CLI tool. The sample code ( https://github.com/Shopify/function-examples/tree/4bf1a0abebb38d58b93fa34e8c8ef4b6abb58b5c/sample-apps/discounts ) works as intended, i.e. a product is created when clicking the button in the Admin dashboard, but I am unable to call the Admin API from my extension.

my-app/app/routes/app._index.jsx contains sample code that successfully calls the Admin API. When I copy the entire file exactly as is to my-app/extensions/post-purchase-ui/src/index.jsx (only modifying the relative import from import { authenticate } from "../shopify.server"; to import { authenticate } from "app/shopify.server";). I get errors. First, there was this:

$ shopify app dev
/my-app/node_modules/wrap-ansi/index.js:2
const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /my-app/node_modules/string-width/index.js from /my-app/node_modules/wrap-ansi/index.js not supported.
Instead change the require of /my-app/node_modules/string-width/index.js in /my-app/node_modules/wrap-ansi/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/my-app/node_modules/wrap-ansi/index.js:2:21) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v21.7.2

which went away after running yarn add [email protected] -W. But after that I got the following error:

    node_modules/@remix-run/node/dist/sessions/fileStorage.js:17:19:
      17 │ var path = require('node:path');
         ╵                    ~~~~~~~~~~~

  The package "node:path" wasn't found on the file system but is built into node. Are you trying to
00:32:09 │ extensions │ ✘ [ERROR] Could not resolve "node:crypto"
00:32:09 │ extensions │ 
00:32:09 │ extensions │     node_modules/@remix-run/node/dist/sessions/fileStorage.js:15:21:
00:32:09 │ extensions │       15 │ var crypto = require('node:crypto');
00:32:09 │ extensions │          ╵                      ~~~~~~~~~~~~~
00:32:09 │ extensions │ 
00:32:09 │ extensions │   The package "node:crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, 
...

Error: Build failed with 14 errors:
 node_modules/@remix-run/node/dist/sessions/fileStorage.js:15:21: ERROR: Could not resolve "node:crypto"
 node_modules/@remix-run/node/dist/sessions/fileStorage.js:16:22: ERROR: Could not resolve "node:fs"
 node_modules/@remix-run/node/dist/sessions/fileStorage.js:17:19: ERROR: Could not resolve "node:path"
 node_modules/@remix-run/node/dist/stream.js:15:26: ERROR: Could not resolve "node:stream"
 node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:15:21: ERROR: Could not resolve "node:crypto"
 ...

I have no clue how to fix this, I already tried installing the modules with yarn, setting build target to “node” in vite.config.js and adding the following to remix.config.js:

module.exports = {
  serverNodeBuiltinsPolyfill: {
    modules: {
      crypto: true,
      stream: true,
      fs: true,
      path: true,
      "fs/promises": true,
      os: true,
      util: true,
    }
  },

but still get the same error.

I can not target the only h2 element in my code. I am running javascript in the same section of code and it seems the styling has been taken over in there, however I cant target the element by id through javascript either. I have also tried in line styling through html as well. after clicking the “end game” button, a gameResults div becomes visible and list the results under the h2 element. the h2 element is the title, and I cant seem to style it individually at all. I have even tried targeting it to change the color and that proves I am unable to target it through css as usual. I hard coded the h2 element into the html because i specifically wanted to be able to style it individually. there has to be some overriding happening within this specific portion of the javascript but i don’t understand it. can someone help me understand what is happening here?

screen shot of output included. But to describe the output is as follow:
the p element is larger than the title h2 element and has the bold style applied and the h2 only seems to increase size with the same proportions as the p element when i change the font-size in the .gameResults div.

I explained everything I have tried above.[this shows the html css and results and a portion of javascriptthis shows the javascript ](https://i.stack.imgur.com/ALn09.jpg)

There is this thing called “EaglerForge” that allows you to mod EaglerCraft, an AOT compiled version of Minecraft that allows you to play in your browser. Anyway, I am trying to redo the ModGUI by just recalling the function. here’s the ModGUI:

function displayGui() {
  function gui() {
    if (document.querySelector("#eaglerpl_gui")) {
      document.querySelector("#eaglerpl_gui").remove();
    }
    localStorage.setItem(
      "ml::Mods",
      localStorage.getItem("ml::Mods") || "[]"
    );
    try {
      localStorage.setItem(
        "ml::Mods",
        JSON.stringify(JSON.parse(localStorage.getItem("ml::Mods")))
      );
    } catch (error) {
      localStorage.setItem("ml::Mods", "[]");
    }
    var Mods = JSON.parse(localStorage.getItem("ml::Mods"));
    var container = document.createElement("div");
    container.id = "eaglerpl_gui";
    container.style = `width:100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10; color: white; font-family: Minecraftia, sans-serif; overflow-y: scroll; overflow-x: hidden; background-image: url(data:image/png;base64,UklGRhoBAABXRUJQVlA4TA0BAAAvn8AnAIWjtpEECdnA2N0DsTROy7xUqfrWw0jbyLkJKTz0+I20jTT/Bo89e1YR/Wfktm0Y+wNKLobT7QP/n/B7Z/naW26QHoTpHB7LFouyKHlzeHxfCStSuj9KdbC8z1IJ5iWiyQed48vtYJ+lUu0t4VwranS1XMIutSiLYlbb8G54uf2p3VPSfRZtSrlsPFjOzZZrd/us3B3uK+HcHJQql+xbLMrS/WqNpm6DeZ/VIPVYaN/KzUbp91nd9xl5pYu50dU2W417nbdTj5l2Ne92uM9qXNpyf6+oXkabHKXaZ1HS4Iaqpim+1KIJ+0M49/LjNbTGP5mrrMZEuc7Uzcb1ViOJ6TuOt4NGJs+zDgA=); background-color: rgb(60,60,60); background-blend-mode: multiply; background-size: 64px;`;
    var title = document.createElement("h1");
    title.style = "text-shadow: 0px 0px 4px;";
    title.innerHTML = "Mod Manager";
    var closeButton = document.createElement("a");
    closeButton.style = `margin-left: 2rem; color: red;`;
    closeButton.href = "javascript:void(0)";
    closeButton.addEventListener("click", () => {
      document.querySelector("#eaglerpl_gui").remove();
    });
    closeButton.innerHTML = "[X]";
    title.appendChild(closeButton);
    container.appendChild(title);

    var warningPoster = document.createElement("p");
    warningPoster.style = "font-size: 0.8rem; color: orangered;";
    warningPoster.innerHTML =
      "Warning: Installing Mods gives them full control over the game. Be cautious when installing them.<br>Mods that have been removed also need a reload to stop running in the background.";
    container.appendChild(warningPoster);

    var tipPoster = document.createElement("p");
    tipPoster.style = "font-size: 0.8rem; color: yellow;";
    tipPoster.innerHTML =
      "Tip: if the mods say that they failed loading, try refreshing the gui";
    container.appendChild(tipPoster);

    var table = document.createElement("table");
    table.style = "table-layout: fixed; width: 100%";
    var headerRow = document.createElement("tr");
    headerRow.style = "background: rgb(50,50,50);";
    var urlBox = document.createElement("th");
    urlBox.style = "text-align: center;";
    urlBox.innerHTML = "URL";
    headerRow.appendChild(urlBox);
    var statusBox = document.createElement("th");
    statusBox.style = "text-align: center; width: 15%;";
    statusBox.innerHTML = "Status";
    headerRow.appendChild(statusBox);
    table.appendChild(headerRow);

    Mods.forEach((url) => {
      var row = document.createElement("tr");
      row.style = `box-shadow: 0px 2px 0px grey;`;
      var urlBox = document.createElement("td");
      urlBox.style = "user-select: text;";
      var textWrapper = document.createElement("div");
      textWrapper.style = `max-width: 100%; overflow-wrap: anywhere; max-height: 3rem; overflow-y: scroll;`;
      textWrapper.innerText = url;
      urlBox.append(textWrapper);
      row.appendChild(urlBox);
      var statusBox = document.createElement("td");
      statusBox.innerHTML = ((curl) => {
        var targs = document.querySelectorAll("script[data-Mod]");
        for (let i = 0; i < targs.length; i++) {
          const elem = targs[i];
          if (elem.getAttribute("data-Mod") === curl) {
            return "LOADED";
          }
        }
        return "FAILED";
      })(url);
      switch (statusBox.innerHTML) {
        case "LOADED":
          statusBox.style = "background-color: green; text-align: center;";
          break;
        case "FAILED":
          statusBox.style = "background-color: dimgrey; text-align: center;";
          break;
        default:
          break;
      }
      var binBtn = document.createElement("button");
      binBtn.style =
        "background: transparent; text-align: center; color: yellow; cursor: pointer; font-family: 'Minecraftia', sans-serif; text-decoration: underline; border: 0; margin-left: 1rem; font-size: 1rem;";
      binBtn.innerHTML = "[X]";
      binBtn.addEventListener("click", () => {
        if (!window.confirm("Delete Mod?") || Mods.indexOf(url) === -1) {
          return;
        }
        Mods.splice(Mods.indexOf(url), 1);
        localStorage.setItem("ml::Mods", JSON.stringify(Mods));
        gui();
      });
      statusBox.appendChild(binBtn);
      row.appendChild(statusBox);
      table.appendChild(row);
    });

    var addBtn = document.createElement("button");
    addBtn.style =
      "background: transparent; text-align: center; color: yellow; cursor: pointer; font-family: 'Minecraftia', sans-serif; text-decoration: underline; border: 0; margin-right: 1rem;  font-size: 1rem;";
    addBtn.innerHTML = "Add new";
    addBtn.addEventListener("click", () => {
      var newMod = window.prompt("URL of Mod: ", "http://example.com/example.js");
      Mods.push(
        newMod
      );
      localStorage.setItem("ml::Mods", JSON.stringify(Mods));
      if(window.ModLoader){
        ModLoader([newMod]);
      }
      gui();
    });

    var uploadBtn = document.createElement("button");
    uploadBtn.style =
      "background: transparent; text-align: center; color: yellow; cursor: pointer; font-family: 'Minecraftia', sans-serif; text-decoration: underline; border: 0;  font-size: 1rem;";
    uploadBtn.innerHTML = "Upload...";
    uploadBtn.addEventListener("click", function uploadBtnListener() {
      var filePicker = document.createElement("input");
      filePicker.type = "file";
      filePicker.accept = ".js";
      filePicker.addEventListener("input", function onInput() {
        if (filePicker.files[0]) {
          var reader = new FileReader();
          reader.addEventListener("load", function onModRead() {
            var newMod = reader.result.replace(";base64", `;fs=${encodeURIComponent(filePicker.files[0].name) || "unknown"};base64`);
            Mods.push(newMod);
            localStorage.setItem("ml::Mods", JSON.stringify(Mods));
            if(window.ModLoader){
              ModLoader([newMod]);
            }
            gui();
          });
          reader.readAsDataURL(filePicker.files[0]);
        }
      });
      filePicker.click();
    });

    container.appendChild(table);
    container.appendChild(addBtn);
    container.appendChild(uploadBtn);

    var notice = document.createElement("a");
    notice.innerHTML = "Refresh GUI";
    notice.href = "javascript:void(0)";
    notice.addEventListener("click", function reloadListener() {
      setTimeout(gui, 500);
      this.remove();
    });
    notice.style =
      "color: yellow; display: block; margin-top: 2rem; width: 0; white-space: nowrap;";
    container.appendChild(notice);
    ModAPI.events.callEvent("gui", {});
    document.body.appendChild(container);
  }
  gui();
}

link: https://github.com/eaglerforge/EaglerForge

there is a chance that I just forgot ‘}’ at the end of “displayGUI()”

I was expecting nothing to happen, and instead got this error.

Alguem tem alguma solução? já adicionei a variavel no ambiente do Windowns e aida não consigo inicializar o bot, utilizei o whatsapp-web.js para criar um bot e quando inicializo o codigo me aparece isso:

nodebot.js : O termo ‘nodebot.js’ não é reconhecido como nome de cmdlet, função, arquivo de script ou programa operável.
Verifique a grafia do nome ou, se um caminho tiver sido incluído, veja se o caminho está correto e tente novamente.
No linha:1 caractere:1

• nodebot.js

•   + CategoryInfo          : ObjectNotFound: (nodebot.js:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
  
  

Já tentei adicionar a variavel no ambiente do windowns com o endereço do NODE mas sem sucesso

If I have:

 const myRegex = /abc/;

Or maybe I have:

const myRegex = /a(bc)/;

Is there any way I can check whether or not myRegex contains a group inside it?

I know I can convert the regular expression to a string and check that way:

const hasGroup = (regex) =>
    (regex + '').includes('(') && (regex + '').includes(')')

But is there a better (ie. non-string-based) way to find out this information?

I’m having a problem with getting the current response from Google Forms. My objective is get a number from a input from Forms and make a multiplication table of this number. I’m using Apps Script to get the number and returning it to the response page. A tried of a lot of ways, but every time the response show the penultimate number sent and not the current one. For examble: I give the number 7 for the code calculate the multiplication table, but instead it shows the multiplication table of the number 4 that I sent before. And just in the next try it shows the multiplication table of the number 7.

Img1
Img2

This is my code:
`function onFormSubmit(e) {
var form = FormApp.getActiveForm();
var responses = form.getResponses(); // Get all responses

// Get the last response
var lastResponse = responses[responses.length - 1];

// Get the individual responses from the last response
var itemResponses = lastResponse.getItemResponses();

// Now you can manipulate the individual responses as desired
var num = parseInt(itemResponses[0].getResponse());

Logger.log(num)

// Build the confirmation message based on the last response
var confirmationMessage = "Multiplication table of " + num + ":nn";

for (var i = 1; i <= 100; i++) {
    confirmationMessage += num + " x " + i + " = " + num * i + "n";
}

// Set the custom confirmation message
form.setConfirmationMessage(confirmationMessage);

}`

And this how is configured my trigger:

Img3

I need to test something like below:

If div.table-row.table-row-hover exists, it must contain the specified text.

If div.table-row.table-row-hover does not exist, there must be an i[class=”far fa-empty-set”] element.

my code doesn’t work. It fails because doesn’t find div.table-row.table-row-hover.

it.only("Test", () => {

  const query = "ExampleText"; 
  cy.get('div[class="ng-search-input"]').type(`${query}{enter}`);
  cy.get("div.table-row.table-row-hover").then(($elements) => {
    if ($elements.length > 0) {
      let textFound = false;
      $elements.each(($el) => {
        const text = Cypress.$($el).text().toLowerCase(); 
        if (text.includes(query.toLowerCase())) {
          textFound = true;
        }
      });
      expect(textFound).to.be.true;
    } else {
      cy.get('i[class="far fa-empty-set"]').should("exist");
    }
  });
});

Could someone help me please

For some resoning i have been struggling with routing in Chrome extension
The problem is about redirecting users based on their authentication status in a React application using React Router. Specifically, the issue is ensuring that when the user is not authenticated (i.e., user is null), they are redirected to the Onboarding page, while authenticated users are directed to the main application routes.

 import React, { useEffect, useState } from "react";
import {
  RouterProvider,
  createHashRouter,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import Home from "./pages/Home";
import Onboarding from "./pages/Onboarding";
import SplashScreen from "./components/SplashScreen/SplashScreen";
import ScreenTwo from "./components/Onboarding/ScreenTwo";
import ScreenThree from "./components/Onboarding/ScreenThree";
import RootLayout from "./components/layouts/RootLayout";
import AlarmPage from "./pages/alarm/AlarmPage";

const router = createHashRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { path: "/", element: <Home /> },
      { path: "/alarm/alarmpage", element: <AlarmPage /> },
    ],
  },
  { path: "/onboarding", element: <Onboarding /> },
  { path: "/screentwo", element: <ScreenTwo /> },
  { path: "/screenthree", element: <ScreenThree /> },
]);

const App = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Check user data in chrome.storage or any other authentication method
    const userData = localStorage.getItem("user");
    if (userData) {
      setUser(JSON.parse(userData));
    } else {
      setUser(null);
    }
  }, []);

  console.log(user);

  return (
    <RouterProvider router={router}>
      <Routes>
        {user === null ? (
          <Route path="*" element={<Navigate to="/onboarding" replace />} />
        ) : (
          <>
            <Route path="/*" element={<RootLayout />} />
            <Route path="/onboarding" element={<Onboarding />} />
            <Route path="/screentwo" element={<ScreenTwo />} />
            <Route path="/screenthree" element={<ScreenThree />} />
          </>
        )}
      </Routes>
    </RouterProvider>
  );
};

export default App;

all i am getting is just

<RootLayout> 
   <Home /> 
<RootLayout />

it is not Navigating to onboarding page if user === null

Im trying to build multiplayer chess game and implement it in steps.

1. Display a chessboard in javascript
2. Use chess.js to get available moves and playable game
3. Implement multiplayer, host a server, with ability to change some rules of the game to analyze network data
4. Use node.js and socket.io for multiplayer

I found another project that works but I want to implement this myself.
However I got stuck on implementing chess.js by itself. The repo contains just a .ts file which I don’t know what to do with. I tried to add it to my project but did not work.
https://github.com/jhlywa/chess.js

I currently have chessboard.js in my index.html like this:

<html>
  <head>
    <title>Chess</title>

    <!-- Import chessboard css -->
    <link rel="stylesheet" href="css/chessboard-1.0.0.min.css">

    <!-- Import jquery -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    <!-- Import chessboard -->
    <script src="js/chessboard-1.0.0.min.js"></script>
    
    <!-- Import chess.js -->
    <!-- <script src="chess.js"></script> -->

  </head>

  <body>

    <!-- Display chess board -->
    <div id="board1" style="width: 400px"></div>

    <!-- Initialize chess board-->
    <script src="app.js"></script>

  </body>
</html>

anyone has the code of entering a number and it return it in letters ?
for example entering 4581 and it return
4 thousand 5 hundred eighty one
in java script please. in hurry

anyone has the code of entering a number and it return it in letters ?
for example entering 4581 and it return
4 thousand 5 hundred eighty one
in java script please.

anyone has the code of entering a number and it return it in letters ?
for example entering 4581 and it return
4 thousand 5 hundred eighty one
in java script please.

anyone has the code of entering a number and it return it in letters ?
for example entering 4581 and it return
4 thousand 5 hundred eighty one
in java script please.

I’m trying to create a simple LLM app. I’m calling an LLM with ollama using langchain.

Langchain ollama usage

I installed all the required dependencies – npm install @langchain/community.

My folder structure looks like this:

├── node_modules..
├── public
│   ├── index.html
│   └── app.js
├── package-lock.json
├── package.json
└── server.js

After instantiating the server, I click a button included in the html file which calls app.js.

[app.js]

import { Ollama } from "@langchain/community/llms/ollama";

const chatButton = document.getElementById('chat-button');

chatButton.addEventListener('click', async () => {
  try {
    console.log('Initializing Ollama client...');
    // const ollama = new Ollama({ host: 'http://localhost:11434' });
    const ollama = new Ollama({
      baseUrl: "http://localhost:11434", // Default value
      model: "llama2", // Default value
    });
    console.log('Ollama client initialized.');

    console.log('Making API request...');
    const response = await ollama.chat({
      model: 'llama2',
      messages: [{ role: 'user', content: 'Why is the sky blue?' }],
    });
    console.log('API response received.');

    console.log('Displaying response:', response.message.content);
    alert(response.message.content);
  } catch (error) {
    console.error('Error:', error);
    alert('An error occurred while fetching the Ollama response.');
  }
});

However, I get the error:

localhost/:1 Uncaught TypeError: Failed to resolve module specifier "@langchain/community/llms/ollama". 

Relative references must start with either "/", "./", or "../".

I checked the installations multiple times and reinstalled the packages after removing package-locak and clearing cache. Nothing seems to work. Can someone help me resolve this?

This Office Script against a single Query object works:

function main(workbook: ExcelScript.Workbook) {
    // Get all the Power Query queries in the workbook.
    let query = workbook.getQuery("data");
    console.log(`Query Name: ${query.getName()}, Rows Loaded: ${query.getRowsLoadedCount()}, Loaded to: ${query.getLoadedTo()}, Loaded to Data Model:${query.getLoadedToDataModel()}, Refresh Date: ${query.getRefreshDate()}`);
}

This code that uses forEach over a collection of Query objects (taken from this Microsoft Learn sample ) does not work:

function main(workbook: ExcelScript.Workbook) {
  // Get all the Power Query queries in the workbook.
  let queries = workbook.getQueries();

  // For each query, log the date it was last refreshed.
  queries.forEach(query => {
    console.log(`Query Name: ${query.getName()}, Rows Loaded: ${query.getRowsLoadedCount()}, Loaded to: ${query.getLoadedTo()}, Loaded to Data Model:${query.getLoadedToDataModel()}, Refresh Date: ${query.getRefreshDate()}`);
  });
}

Error:
Line 7: Query getName: The API you are trying to use could not be found. It may be available in a newer version of Excel. Please refer to the documentation: “https://docs.microsoft.com/office/dev/add-ins/reference/requirement-sets/excel-api-requirement-sets”.

I don’t think the error message is accurate based on the first version working.

This code:

function main(workbook: ExcelScript.Workbook) {
    // Get all the Power Query queries in the workbook.
    let queries = workbook.getQueries();
    queries.forEach(query => {
        console.log(`Query Name: ${query}`);
    });
}

Returns one line per object in the console log:
Query Name: [object Object]
Query Name: [object Object]

And at least the Intellisense thinks the object type is ‘Query’:

And defining the type yields the same error

function main(workbook: ExcelScript.Workbook) {
    // Get all the Power Query queries in the workbook.
    let queries = workbook.getQueries();
    queries.forEach((query: ExcelScript.Query) => {
        console.log(`Query Name: ${query.getName()}`);
    });
}

It feels like a JavaScript error, but I’m just not seeing it!

I’m new to programming, I’m studying JavaScript, basic CSS, basic HTML and I’m doing a mini “clicker” project where I intend to update every time I learn something new, but I’m having a hard time understanding why the “if” part of the code isn’t working.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clicker</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="display">
        <h1 id="number">0</h1>
        <button id="addNum" onclick="addNumber()">Add</button>
    </div>
    <script src="./script.js"></script>
</body>
</html>

JavaScript:

var num = document.getElementById("number");
let numberAdd = 1;
var numberDisplay = 0;

function addNum() {
  numberDisplay += numberAdd;
  num.textContent = numberDisplay;
}

function addUpgrade() {
  numberDisplay -= 10;
  num.textContent -= 10;
  numberAdd++;
}


if (numberDisplay > 10) {
    var disP = document.getElementById("display");
    const newBtn = document.createElement("button");
    newBtn.innerHTML = '<button id="addUp" onclick="addUpgrade()">Upgrade';
    disP.appendChild(newBtn)
}

My problem is here, I’m trying to use simple logic: number > 10 ?If yes, create a button.

if (numberDisplay > 10) {
    var disP = document.getElementById("display");
    const newBtn = document.createElement("button");
    newBtn.innerHTML = '<button id="addUp" onclick="addUpgrade()">Upgrade';
    disP.appendChild(newBtn)
}

But it’s not working
enter image description here

I saw this, but it looks scary: https://developer.amazon.com/docs/fire-tablets/webapp-debug-app.html

It’s an Android-based browser. Is there any magic screen taps, setting changes or anything to just see the javascript console? It’s a fairly straightforward single-page app that appears to be working perfectly, but we have an MQTT ping going on in the background that only shows up in the console at debug/verbose level.