jQuery input element with id selection using id selector

I am using JQuery 3.6 and I’m trying to create a simple email registration snippet on a page.

I am surprised that when I type an email in the input, and click the button, the alert box shows a blank. I get the same result when I use Code Inspector. The element is identified and selected correctly, but for some reason, I can’t seem to extract the email value entered in the input box.

Here is my markup and minimal Javascript:

<div class="g-mb-30">
    <div class="input-group border-0 rounded">
        <input id="newsletter-subscription-email" class="form-control border-0 g-pa-12" type="email" title="Subscribe to our newsletter!" placeholder="Email address">
        <div class="input-group-append p-0">
            <button id="newsletter-subscribe" class="btn btn-primary" type="submit" role="button">Subscribe</button>
        </div>
    </div>  
</div>

<script type="text/javascript">
function isValidEmail(some_email){
/* impl detail */
}

$()ready(function(){
    $('#newsletter-subscribe').on('click', function(e){
       let email = $('#newsletter-subscription-email').val().trim().toLowerCase();
       alert(email);  // displays blank if even I type an email address

       if (email.length && isValidEmail(email)) {
           e.preventDefault();

           // some logic ...
       }
    }
});
</script>

Why is the address not being correctly retrieved – since the selector CSS is correct – and how do I fix this to correctly retrieve the entered email?

Display selected tab item into url path

I want to display selected tab item into url path. I found this Material UI example:

import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`vertical-tabpanel-${index}`}
      aria-labelledby={`vertical-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

function a11yProps(index: number) {
  return {
    id: `vertical-tab-${index}`,
    'aria-controls': `vertical-tabpanel-${index}`,
  };
}

export default function VerticalTabs() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  return (
    <Box
      sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 224 }}
    >
      <Tabs
        orientation="vertical"
        variant="scrollable"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs example"
        sx={{ borderRight: 1, borderColor: 'divider' }}
      >
        <Tab label="Item One" {...a11yProps(0)} />
        <Tab label="Item Two" {...a11yProps(1)} />
        <Tab label="Item Three" {...a11yProps(2)} />
        <Tab label="Item Four" {...a11yProps(3)} />
        <Tab label="Item Five" {...a11yProps(4)} />
        <Tab label="Item Six" {...a11yProps(5)} />
        <Tab label="Item Seven" {...a11yProps(6)} />
      </Tabs>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
      <TabPanel value={value} index={3}>
        Item Four
      </TabPanel>
      <TabPanel value={value} index={4}>
        Item Five
      </TabPanel>
      <TabPanel value={value} index={5}>
        Item Six
      </TabPanel>
      <TabPanel value={value} index={6}>
        Item Seven
      </TabPanel>
    </Box>
  );
}

https://mui.com/components/tabs/#VerticalTabs.tsx

Sandbox: https://codesandbox.io/s/verticaltabs-material-demo-forked-yyqhm

I found this code example how to add url param:
https://v5.reactrouter.com/web/example/nesting

Do know how I can implement the code to display selected tab into url link. Example: https://yyqhm.csb.app/<selected_tab>

react-electron global object/class

I’m trying to make a global accessible object, so that its values can be changed and can be read from every component. I’ve create a classs with static fields:

export default class Settings {
  static first: string;

  static second: string;
}

Lets say I have two components in separate files:

import Settings from './Settings'

// located in firstComponent file
export default function FirstComponent() {
Settings.First = 'test'    <---------------- SET VALUE
return (some html)
}

// located in secondComponent file
export default function SecondComponent() {
let qq = Settings.First <----------------------- ASSUME HERE IS VALUE "TEST"
}

But it is not working. How I can create static class/fields that will be accessible within all components like C# static classes. Is it even possible?

Thanks in advance

Looping through multiple collection of arrays

I have a lot of data as response not parsed and also, so you can see what is in the response. But i want all the scores from the table results, the quary fiters on actorId, categoryId, what gets all the data of all subjects from that specific actorId.

parsed data response from the localhost of my:

[
{
"id": 1,
"name": "Word",
"tests": [
{
"id": 1,
"title": "Test  1",
"name": "Test 1",
"description": "This is the description of the first Test",
"totalPoints": 2,
"duration": 30,
"level": 1,
"subjectId": 1,
"questions": [ ],
"paragraphs": [ ],
"results": [
{
"id": 22,
"score": 100.0,
"timeElapsed": 5,
"actorId": 13,
"actor": null,
"testId": 1,
"resultQuestions": [ ],
"resultSliders": [ ]
}
],
"sliders": [ ],
"pausedTests": [ ]
},
{
"id": 5,
"title": "new test",
"name": "new test",
"description": "asdf",
"totalPoints": 0,
"duration": 9,
"level": 3,
"subjectId": 1,
"questions": [ ],
"paragraphs": [ ],
"results": [
{
"id": 19,
"score": 0.0,
"timeElapsed": 4,
"actorId": 13,
"actor": null,
"testId": 5,
"resultQuestions": [ ],
"resultSliders": [ ]
}
],
"sliders": [ ],
"pausedTests": [ ]
},
{
"id": 8,
"title": "test",
"name": "test-1",
"description": "Dit is een test",
"totalPoints": 2,
"duration": 1,
"level": 1,
"subjectId": 1,
"questions": [ ],
"paragraphs": [ ],
"results": [ ],
"sliders": [ ],
"pausedTests": [ ]
}
],
"schools": [ ],
"categoryId": 1,
"category": null
},

Data that comes back if you console.log the reponse of the API from the console.log(response):

The function is called [{"id":1,"name":"Word","tests":[{"id":1,"title":"Test  1","name":"Test 1","description":"This is the description of the first Test","totalPoints":2,"duration":30,"level":1,"subjectId":1,"questions":[],"paragraphs":[],"results":[{"id":22,"score":100.0,"timeElapsed":5,"actorId":13,"actor":null,"testId":1,"resultQuestions":[],"resultSliders":[]}],"sliders":[],"pausedTests":[]},{"id":5,"title":"new test","name":"new test","description":"asdf","totalPoints":0,"duration":9,"level":3,"subjectId":1,"questions":[],"paragraphs":[],"results":[{"id":19,"score":0.0,"timeElapsed":4,"actorId":13,"actor":null,"testId":5,"resultQuestions":[],"resultSliders":[]}],"sliders":[],"pausedTests":[]},{"id":8,"title":"test","name":"test-1","description":"Dit is een test","totalPoints":2,"duration":1,"level":1,"subjectId":1,"questions":[],"paragraphs":[],"results":[],"sliders":[],"pausedTests":[]}],"schools":[],"categoryId":1,"category":null},{"id":2,"name":"PowerPoint","tests":[{"id":2,"title":"Test  2","name":"Test 1","description":"This is the description of the first Test","totalPoints":2,"duration":30,"level":2,"subjectId":2,"questions":[],"paragraphs":[],"results":[],"sliders":[],"pausedTests":[]},{"id":3,"title":"De titel der titelen","name":"Deze test heet programmeren voor gevorderden","description":"Deze test gaat over hoe leraren ict moet leren begrijpen.","totalPoints":25,"duration":30,"level":3,"subjectId":2,"questions":[],"paragraphs":[],"results":[{"id":20,"score":44.0,"timeElapsed":50,"actorId":13,"actor":null,"testId":3,"resultQuestions":[],"resultSliders":[]}],"sliders":[],"pausedTests":[]}],"schools":[],"categoryId":1,"category":null},{"id":3,"name":"Excel","tests":[],"schools":[],"categoryId":1,"category":null},{"id":7,"name":"Test","tests":[],"schools":[],"categoryId":1,"category":null}]

I tried for myself if i could get the score’s back from the results array table.

function showAllSubjectsScores(response) {
    var parsedData = JSON.parse(response);

console.log('The function is called', parsedData[results][0].score)
    
}

This is how the APi call is made for the response of all the data:

// Global var's
var categoryId = 1;
var actorId = 13; // This is my actorId
var websiteUrl = localStorage.getItem('url');

function getSubjectsByActorid() {
    var xHttp = new XMLHttpRequest();
    xHttp.onreadystatechange = function () {
        if (xHttp.readyState == XMLHttpRequest.DONE) {

            var response = xHttp.response;
            if (xHttp.status == 200) {
                console.log('ANTWOORD IS TERUG VAN DE SERVER')

                showAllSubjectsScores(response);

            } else {
                console.log(response);
                console.log(xHttp.status);

            }
        }
    };

    xHttp.onerror = function () {
        console.log(xHttp.statusText);
    };

    xHttp.open("GET", websiteUrl + "/api/Subjects/" + categoryId + "/" + actorId, true);

    xHttp.send();
    console.log('AANVRAAG IS VERZONDEN')
}
function showAllSubjectsScores(response) {
    var parsedData = JSON.parse(response);

    console.log('The function is called', response)
    
}
getSubjectsByActorid();


This is how the api quarry is build:

// GET: api/Subjects
        [HttpGet("/api/Subjects/{categoryId}/{actorId}")]
        public async Task<ActionResult<List<Subject>>> GetSubjectResults(int categoryId, int actorId)
        {
        var subjectResults = _context.Subjects
       .Where(i => i.CategoryId == categoryId)
       .Include(t => t.Tests)
       .ThenInclude(r => r.Results.Where(a => a.ActorId == actorId))
        .AsNoTracking().ToListAsync();

            if (subjectResults == null)
            {
                return StatusCode(204);
            }

            return await subjectResults;
        }

Comments made to add comments to posts do not match the posts

  1. I’m trying to make a blog. I want to comment on shared posts, comments are made and done well. It shares the views of the posts.

The solution I’m looking for is to make each post’s comments unique.

The IDs of the posts and comments should match and they should appear on the homepage without any problems, but I couldn’t do that.



` COMMENT AND POST SCHEMA'S `

` This is how my Post and Comment schemas link `


const commentSchema = new mongoose.Schema({ author: String, comment: String });
const Comment = mongoose.model("Comment", commentSchema);

const postSchema = new mongoose.Schema({
    title: { required: true, type: String },
    content: { type: String },
    comments: [
        commentSchema
    ]
});
const Post = mongoose.model("post", postSchema);





` Commenting codes like this `


` COMMENT APP `

app.post("/posts", (req, res) => {
    const comment = new Comment({
        author: req.user.username,
        comment: req.body.comment
    });
    comment.save();
    User.findOneAndUpdate({username: req.user.username}, {$push: {myComments: comment}}, function(err){
        if(!err){
            Post.findOneAndUpdate({}, {$push: {myComments: comment}}, function(err){
                if(!err){
                    res.redirect("/posts");
                }
            })
        }else{
            console.log(err);
        }
    });
}); ```








` Here are the homepage codes where Posts and Comments appear. Where is the mistake? `



 
` POST AND COMMENT PAGE `

<% for(var i=posts.length; i--; i>-1){ %>
                    <div class="card">
<div class="card-body">
                            <h5>
                                <%=posts[i].title%>
                            </h5>
                            <p>
                                <%=posts[i].content%>
                            </p>
                        </div>
                        <ul class="list-group list-group-flush">
                            


                            <li class="list-group-item">
                                <form action="/posts" method="post">
                            <li class="list-group-item">
                                <div class="container">
                                    <input class="comment" name="comment" type="text" placeholder="  Yorum Yaz">
                                    <button class="button-commentAdd btn btn-success">Yorum Yap</button>
                                </div>
                            </li>
                            </form>
                            </li>
                            <% for(var j=comments.length; j--; j>-1){ %>
                                <li class="list-group-item">
                                    <div class="container pt-2">
                                        <div class="row">
                                            <div class="col-12">
                                                <p>
                                                    <strong>
                                                        <%= comments[j].author %>
                                                    </strong> <label>: </label>
                                                    <label> </label>
                                                    <%= comments[j].comment %>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <% } %>
                        </ul>
                    </div>
                    <% } %>

How to repeatedly call a button function, which increase a number every second? [duplicate]

I would like the “number” div to increase by 0.1/s everytime I click the button (press button once, +0.1/s; press twice, +0.2/s…) However, the code is not been executing.

<span class = "num">0</span>
<button class = "btn">
add one
</button>
let btn = document.querySelector(".btn");
let num = document.querySelector(".num");

function addUp(){
setinterval(()=>{
    num.innerHTML+=0.1;
},1000)
}

btn.addEventListener("onclick", addUp);

Make Chrome Extension Bigger

I recently made a chrome extension, but for some reason, when you first click it it appears very small. Small

My code:

#dif {
  width: 400px;
  height: 400px;
  font-size: 40px;
  color: black;
  text-align: center;
  font-weight: bold;
  padding: 100px;
  border: 5px solid black;
  border-radius: 20px;
  background-color: red;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Dif is the name of the box that is supposed to appear.

How to check if HTML5 FileSystemDirectoryHandle points to an existing directory

Lets say I have a refetence to a FileSystemDirectoryHandle, obtained by showDirectoryPicker(), which might have been deleted (at some point in time after referencing). What is the proper API to check if it points to an existing directory?

I can try-catch for await (const entry of directory.values()) but I wonder if there is something more appropriate.

I was thinking of using getDirectoryHandle but I do not have parent reference, nor does it accept empty name argument.

Changing text on mouseover for an SVG map

I am trying to change the text in the bubbles to different data on hover and having some difficulties. I want to be able to hover over a state and have the info for that state display in the red bubbles. Each state will have different information, and I am already using a tooltip to display the state name above it. I am currently using jQuery for the tooltip.

svg map

Clone contenteditable div without text

How can I clone a new row without also copying the text that has been inserted inside the contenteditable div? I want a new blank div to type into. Many thanks

<div id="wrapper">
  <div id="row">
    <p><strong>Heading</strong></p>
    <div contenteditable="true" data-placeholder="Type here..."></div>
  </div>
</div>
<button id="button" onlick="duplicate()">Add another row</button>
document.getElementById('button').onclick = duplicate;

var i = 0;
var original = document.getElementById('row');

function duplicate() {
    var clone = original.cloneNode(true);
    clone.id = "row" + ++i;
    original.parentNode.appendChild(clone);
}

HTML/JS Kanban Board doesn’t let me drop newly created tasks into other columns

I am creating a Kanban Board in HTML/JS/CSS and am close to finishing my MVP here. Everything is working as expected, except for one thing. When I create a new task, I am able to drag it (seemingly) but not DROP it into any other columns. The sample tasks I have do not have this problem and I am ripping my hair out trying to figure out what the issue is. When I attempt to drag and drop newly created tasks into other columns, I get this error:

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at drop (/script.js:31:13)
    at HTMLDivElement.ondrop (/:45:112)

I am using basic drag and drop API stuff for HTML and JS and literally only need to make this work in order to finish my MVP. Any help is appreciated. NOTE: The line numbers in the above error change based on what column I try to drop the new task into but the error itself stays the same.

Here is my code:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Christopher's Kanban Board</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="new-task-window" id="new_task_form">
      <div class="header">
        <div class="title">New Task</div>
        <button class="btn-close-window" data-target="#new_task_form">X</button>
      </div>
      <div class="body">
        <input type="text" id="new-task-name" />
        <input type="submit" value="New Task" id="new-task-submit" />
      </div>
    </div>

    <!--Kanban Board-->
    <div class="kanban-container">
      <div class="kanban-container-section" id="todo" ondrop="drop(event)" ondragover="allowDrop(event)">
        <strong>To Do</strong>
        <div class="task-button-block">
            <button class="task-button" id="task-button" data-target="#new_task_form">+ New Task</button>
        </div>
        <div class="task" id="task1" draggable="true" ondragstart="drag(event)">
          <span contenteditable="true">Task #1</span>
            <!--<button class="edit_button" id="edit_button">Edit</button>-->
        </div>
        <div class="task" id="task2" draggable="true" ondragstart="drag(event)">
          <span contenteditable="true">Task #2</span>
        </div>
        <div class="task" id="task3" draggable="true" ondragstart="drag(event)">
          <span contenteditable="true">Task #3</span>
        </div>
        <div class="task" id="task4" draggable="true" ondragstart="drag(event)">
          <span contenteditable="true">Task #4</span>
        </div>



      </div>
      <div class="kanban-container-section" id="inprogress" ondrop="drop(event)" ondragover="allowDrop(event)">
        <strong>In Progress</strong>

      </div>
      <div class="kanban-container-section" id="done" ondrop="drop(event)" ondragover="allowDrop(event)">
        <strong>Done</strong>

      </div>
      <div class="kanban-container-section" id=" blocked" ondrop="drop(event)" ondragover="allowDrop(event)">
        <strong>Blocked</strong>

      </div>
    </div>
    <div id="overlay"></div>
    <script src="script.js"></script>
  </body>
</html>

script.js:

const task = document.querySelector('.task');
const buttons = document.querySelectorAll("[data-target]");
const close_buttons = document.querySelectorAll(".btn-close-window");

//Allow the New Task Button to open the New Task Creation Window.
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelector(btn.dataset.target).classList.add("active");
    overlay.classList.add("active");
  });
});

close_buttons.forEach((btn) => {
  btn.addEventListener('click', () => {
    document.querySelector(btn.dataset.target).classList.remove("active");
    overlay.classList.remove("active");
  });
});

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

const new_task_submit = document.getElementById("new-task-submit");
if(new_task_submit) {
  new_task_submit.addEventListener('click', createTask);
}

function createTask() {
  const task_div = document.createElement("div");
  const input_value = document.getElementById("new-task-name").value;

  //Take the text from the above input and create a task with that text.
  const text = document.createTextNode(input_value);

  task_div.appendChild(text);
  //Add the proper class (task in this case) to the newly created task.
  task_div.classList.add("task");
  //Add the draggable attribute to the newly created task and set it to true to allow drag and drop.
  if(task_div){
    task_div.setAttribute("draggable", "true");
    task_div.setAttribute("contenteditable", "true");
  }

  //task_div.innerHTML += `
  //<div class="task" id="${input_value.toLowerCase().split(" ").join("")}"
  //draggable="true" ondragstart="drag(event)>
    //<span contenteditable="true">${input_value}</span>
  //</div>
  //`

  //Add the new task to the To Do section of the Kanban Board.
  const todo = document.getElementById("todo");
  todo.appendChild(task_div);

  document.getElementById("new-task-name").value = "";
  new_task_form.classList.remove("active");
  overlay.classList.remove("active");

}

style.css (the error would indicate that this file is not the problem):

.kanban-container {
  display: grid;
  grid-auto-columns: 250px;
  grid-auto-flow: column;
  grid-gap: 8px;
  height: 100vh;
  overflow: auto;
}

.kanban-container-section {
  background: #EBEBEB;
  border-radius: 3px;
  display: grid;
  grid-auto-rows: max-content;
  grid-gap: 10px;
  padding: 10px;
}

.kanban-container-section strong {
  background: #2C89BF;
  font-size: 16px;
  margin: 0 0 12px 0;
  padding: 10px;
}

.task {
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(9,30,66,.25);
  border-radius: 3px;
  padding: 10px;
}

.task-button {
  width: 40%;
  background: #FFFFFF;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(9,30,66,.25);
  border: 0.1rem;
  cursor: pointer;
}

.task.button:active {
  transform: scale(0.9);
}

.btn-close-window {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.new-task-window {
  width: 450px;
  position: fixed;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  z-index: 2;
  background-color:#FFFFFF;
}

.new-task-window.active {
  top: 15%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid #ccc;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

#overlay.active {
  display: block;
}

#new-task-name, #new-task-submit {
  padding: 1rem 1rem;
  width: 90%;
  margin: 0.25rem;
  align-items: center;
}

#new-task-submit {
  background-color: #2C89BF;
  border: none;
  color: #FFFFFF;
  align-items: center;
}

Again, if anyone knows what my issue is here, the help is greatly appreciated. Thanks!

Javascript display none property not being triggered the second time

I am using onlick method on a button, on game start and re start. I am making the button’s parent node’s display none on that click. It works the first time when I click (i.e start the game) but after the game is over, when I try to re start the game using the same button, the display:none property is not working.

HTML part of the button and it’s parent node

<div class="game-start-play" id="game-start-play">
            <button id="play-start">Click to play</button>
          </div>

In javascript part, I am clicking the button, then doing some animation and when the animation stops, when I try to re start it the display none property is not working.

const startButton = document.getElementById("play-start");

const gameAnimation = new GameAnimation(parentElement);
window.addEventListener("keydown", gameAnimation.moveCar);

startButton.onclick = () => {
  startButton.parentNode.style.display = "none";
  gameAnimation.init();
};

How to change the size of graph dynamically for React

Although I want to change the size of the graph dynamically using React, it doesn’t work. Why?

It appears values that was input in the forms are immediately reflected in the state. However, these values are reflected in “width” and “height” in Google Charts.
How should I do in order to immediately reflect in the parameter of the Google Charts?

import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import {Chart} from 'react-google-charts';

const App = () => {
    const [W, setW] = useState('100');
    const [H, setH] = useState('100');

    useEffect(() => {
        console.log('useEffect was run.');
        console.log('W=' + W);
        console.log('H=' + H);
    });

    const handleChangeW = (e) => {
        setW(e.target.value);
        console.log('handleChangeW was run -> ' + e.target.value + '(' + W + ')');
    }

    const handleChangeH = (e) => {
        setH(e.target.value);
        console.log('handleChangeH was run -> ' + e.target.value + '(' + H + ')');
    }

    return(
        <>
        <h1>Google Chart Test</h1>
        <hr />
        W: <input type="text" onChange={handleChangeW} value={W} /><br />
        H: <input type="text" onChange={handleChangeH} value={H} />
        <hr />
        <Output W={W} H={H} />
        </>
    );
}

const Output = (p) => {
    const W = p.W + 'px';
    const H = p.H + 'px';
    console.log('W==' + W);
    console.log('H==' + H);

    return (
        <>
            W: {W}<br />
            H: {H}<br />
            <hr />
            <Chart
                    width={W}
                    height={H}
                    chartType="LineChart"
                    loader={<div>Loading Chart</div>}
                    data={[
                    [
                        'aaa', 'bbb', 'ccc','ddd','eee','ffff', 'gggg','hhhhh'
                    ],
                        [1, 100, 90, 110, 85, 96, 104, 120],
                        [2, 120, 95, 130, 90, 113, 124, 140],
                        [3, 130, 105, 140, 100, 117, 133, 139],
                        [4, 90, 85, 95, 85, 88, 92, 95],
                        [5, 70, 74, 63, 67, 69, 70, 72],
                        [6, 30, 39, 22, 21, 28, 34, 40],
                        [7, 80, 77, 83, 70, 77, 85, 90],
                        [8, 100, 90, 110, 85, 95, 102, 110],
                    ]}
                    options={{
                    intervals: { style: 'sticks' },
                    legend: 'none',
                    }}
            />
        </>
    );
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

google.script.run.WithSuccessHandler returning the script completed but did not return anything

I am not seeing where the issue is in my code, that prevents it from returning the success message. I want to give me the message that the submission has been successful and to refresh the screen. While the data is being successfully submitted to the google sheet, I am getting the generic message that the script is completed but didn’t return anything.

var ss = SpreadsheetApp.openById('XXXXX');
var sheet = ss.getSheetByName('Messages');
var thisDocumentURL =ss.getUrl();
var ShtAdmin = "[email protected]";


function doPost(e){
  // Replace with your spreadsheet's ID.
  
  // name, phone_number and e-mail are form elements.
  var area = e.parameter.area;
  var assembly = e.parameter.assembly;
  var pass = e.parameter.pass;
  var line = e.parameter.line;
  var operator = e.parameter.operator;
  var shift = e.parameter.shift;
  var issueDescription = e.parameter.issueDescription;
  var personNotified = e.parameter.personNotified;
  var actionTaken = e.parameter.actionTaken;
  var personTakingAction = e.parameter.personTakingAction;
  var problemCorrected = e.parameter.problemCorrected;
  var approvalToContinue = e.parameter.approvalToContinue;
  var issueCategory = e.parameter.issueCategory;
  var id = getRandom();
  var timestamp = new Date(); // current date as epoch number
  

  sheet.appendRow(
    [id,timestamp,area,assembly,pass,line,operator,shift,issueDescription,personNotified,actionTaken,personTakingAction,problemCorrected,approvalToContinue,issueCategory,message]
  );
  
  var subject = "PEP Log Update";
  var header = "<p> This is an Automated mailer.  All Responses are directed to " + ShtAdmin+",</p>";
  var message = "<p><b>There has been an addition to the PEP log on "+ timestamp + ". </b></p>"+
                "<p><b>Associated with "+assembly +" running on Line " + line + ", "+pass+" pass. </p></b>";

MailApp.sendEmail({

  to: ShtAdmin,
  noReply: true,
  subject: subject,
  htmlBody: header + message 
})

onSuccess(message);
  
var pubUrl = ScriptApp.getService().getUrl();


}  //end of doPost Function


function getSuccessMessage(message){
  //Logger.log(data);
  return("PEP Successfully submitted.");
}

function onSuccess(){
  getSuccessMessage();
  var message = "You have successfully submitted the PEP.  Please refresh screen to reset form.";
  return message;
}



HTML Portion

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=chrome">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/ css/add-ons1.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"  crossorigin="anonymous" ></script>
    <title>Google Apps Script Tester</title>
  
</head>

<body>
    <form method="post" action= "<?= pubUrl ?>" >
    <form id="myForm">
             
        <label for="area">Select Area:</label>
        <select name="area" id="area">
        <option value="AOI">AOI</option>
        <option value="SMT">SMT</option>
        </select>
        <br><br>    
        Assembly: <input type="assembly" name="assembly" value=""><br><br>
        
        <label for="pass">Pass:</label>
        <select name="pass" id="pass">
        <option value="1st">1st</option>
        <option value="2nd">2nd</option>
        <option value="Single">Single</option>
        </select><br><br>
        <label for="line">Line:</label>
        <select name="line" id="line">
        <option value="Line 1/2">Line 1/2</option>
        <option value="Line 3">Line 3</option>
        <option value="Line 4">Line 4</option>
        <option value="Line 7">Line 7</option>
        <option value="Line 8">Line 8</option>
        <option value="Line 10">Line 10</option>
        </select>
        <br><br> 
        Employee Number: <input type="operator" name="operator" value=""><br><br>
        <label for="shift">Shift:</label>
       
        <label for="problemCorrected">Issue Corrected:</label>
        <select name="problemCorrected" id="problemCorrected">
        <option value="Yes">Yes Continue to Run</option>
        <option value="No-Escalate to Supervisor">No - Escalate to Supervisor</option>
        <option value="No-Conintue to Run with Approval">No - Continue to run with Approval</option>
        </select><br><br> 
        Approval to run w/o resolving issue: <input type="approvalToContinue" name="approvalToContinue" value=""><br><br>
        <label for="issueCategory">Issue Category:</label>
        <select name="issueCategory" id="issueCategory">
        <option value="Material Problem">Material Problem</option>
        <option value="Equipment Issue">Equipment Issue</option>
        <option value="Human Error">Human Error</option>
        <option value="Other">Other</option>    
        </select><br><br> 
        
        <br><br><br>
        <p>Please Click to submit data.</p>              
        <button type="submit" id="mySubmit" onClick="">Send Data</button>
        <p id="response_message"></p>
        
<script>
      const scriptURL = <?= pubUrl ?>
      const form = document.forms['myForm']
      google.script.run.withSuccessHandler(onSuccess);
      function onSuccess(message){
        var div = document.getElementById('response_message');
           }
      return response_message;
     form.addEventListener('submit', e => {
      e.preventDefault()
      var response_message = document.getElementById("response_message");
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => response_message.innerHTML = "Success!  Refresh screen for new form")
      .catch(error => response_message.innerHTML = "Error!")

    
        }
      })
    </script>

  
        



</form>
</form>

</body></html>