Function to get a users email and the date on edit of a specific columns rows not working

I am trying to write a google scripts app that picks up on a gsheets users email whilst they fill in a value into a row of a cell (promotion cell) in A and writes the email to the email cell (B) then the date they filled it in into the Date cell (C).

Promotion Cell Email Date
1 johndoe@gmail 2022-10-10

The idea is that using the onEdit I can get a users email and the date automatically in rows B and C. But for some reason, my code is not working the error being on the range variable in the fillEmailAndDate function. I am not sure why this is not executing.

function onEdit(e) {
  Logger.info(e)
  // get the active sheet
  sheet = e.source.getActiveSheet()

  // Get the active cell
  var cell = e.source.getActiveCell();

  // Get the row and column of the active cell
  var row = cell.getRow();
  var col = cell.getColumn(); // 3.0
  // Get the letter of the promotion column
  var promotionColumn = 'C';

  // Get the letters of the email and date columns
  var emailColumn = 'E';
  var dateColumn = 'F';

  // If the active cell is in the promotion column
  if (Math.round(col) == getNumber(promotionColumn)) {

    // Run the fillEmailAndDate function
    fillEmailAndDate(e, coverage_sheet, promotionColumn, emailColumn, dateColumn, row);
  }
}

function fillEmailAndDate(e, sheet, promotionColumn, emailColumn, dateColumn, lastRow) {
  // Get the range of cells to be checked
  var range = sheet.getRange(promotionColumn + "2:" + promotionColumn + lastRow);

  // Use the onEdit trigger to detect when a cell in the promotion column is edited
  sheet.getRange(range).setOnEdit(function(e) {
    // Get the active cell
    var cell = e.source.getActiveCell();

    // Get the row and column of the active cell
    var row = cell.getRow();
    var col = cell.getColumn();

    // If the active cell is in the promotion column
    if (col == promotionColumn) {
      // Get the email and date columns for the active row
      var emailCell = sheet.getRange(emailColumn + row);
      var dateCell = sheet.getRange(dateColumn + row);

      // Get the user's email address from the email column
      var email = Session.getActiveUser().getEmail();

      // Fill in the email and date cells with the user's email address and the current date
      emailCell.setValue(email);
      dateCell.setValue(new Date());
    }
  });
}
function getNumber(letter) {
  // Make sure letter is uppercase
  letter = letter.toUpperCase();
  // Convert letter to a character code and return the corresponding number
  return letter.charCodeAt(0) - 64;
}

JavaScript: Why does changes to input value keep going back to default value

I am trying to create a chrome extension to automatically trade for me on an already existing binary options trading website. The default input value(trading amount) of the website is $1. I want to automatically change the trading amount to $5 or any other amount and then click a button to enter the trade for that amount. Bellow is the full codes in the JavaScript file I set up:

let run_click = document.getElementById('run_button');


run_click.addEventListener("click", async () => {
  
    // Get current active tab
    let [tab] = await chrome.tabs.query({active: true, currentWindow: true});

    // Execute script to run runbot
    chrome.scripting.executeScript({
        target: {tabId: tab.id},
        func: runbot,
  });
})



// Function to run runbot

    async function runbot() {
  const call_button = document.querySelectorAll(".btn.btn-call")[0];
  const amount_input = document.querySelectorAll('.value__val input')[0];

  await amount_input.focus();
  amount_input.value = '$5';
  await amount_input.blur();
  await call_button.click();
}

The problem I am having here is that as soon as the call_button is clicked, the amount changes back to the default $1 and that $1 trade is entered instead of the $5 dollar trade. It is like something automatically switches it back to $1 when the button is clicked. How do I deal with this issue?

UseEffect Hook Infinite Loop + White Screen

I am working on the Linked in Clone from one of Sonny Sangha’s videos, and I have a problem with the useEffect hook. When I run the program, my output is just a blank white screen, and it never changes to the app I programmed before. My guess is that there is some kind of an infinite loop happening, but I do not know where. I copied Sonny’s code exactly, so I do not know what the problem is.

Here is the code:

useEffect(() => {
        db.collection("posts").onSnapshot((snapshot) => 
            setPosts(
                snapshot.docs.map((doc) => ({
                    id: doc.id,
                    data: doc.data(),
                }))
            )
        );
    }, []);

I am slo confused why it is giving me a blank screen, when I clearly passed an empty array as the second argument, meaning it should only be rendered once. Everything runs in every console, and everything compiles. Thank you

Problem with displaying data from table with .closest(“tr”)

iam using 2 modals (Bootstrap) with different contents I now want to display data from a table in Input fields in my Modal. There is an edit button in the row, thats why iam using closest.

With 1 Modal it yesterday worked with:

$(document).ready(function() {
  $(".trigger_popup").on("click", function(){
    $(".modal").modal("show");
    $(".trigger_close").on("click", function(){
    $(".modal").modal("hide"); 
    })
    $tr = $(this).closest("tr");
    var data = $tr.children("td").map(function(){ 
      return $(this).text().trim("");
      
    }).get();
    console.log(data);
    $("#name").val(data[1])
    $("#model").val(data[2])
    $("#facturer").val(data[3])
    $("#serial").val(data[4])
    $("#place").val(data[6])
    $("#notes").val(data[7])
    $("#updated").val(data[8])
    $("#added").val(data[9])
  })
})   

now the code is this:

    $(document).ready(function() {
        $('#exampleModal').on('show.bs.modal', function (e) {
            $tr = $(this).closest("tr");
        var data = $tr.children("td").map(function(){ 
          return $(this).text().trim("");
          
        }).get();
        console.log(data);
        $("#name").val(data[1])
        $("#model").val(data[2])
        $("#facturer").val(data[3])
        $("#serial").val(data[4])
        $("#place").val(data[6])
        $("#notes").val(data[7])
        $("#updated").val(data[8])
        $("#added").val(data[9])
      })
        })

this is my HTML Code:

<div class="table11">
    
          <table id="myTable">
                                  <tr>
                                  <th style="display:none;"></th>
                                    <th>Name</th>
                                    <th>Modell</th>
                                    <th>Hersteller</th>
                                    <th>Seriennummer</th>
                                    <th>Bestand</th>
                                    <th style="display:none;"></th>
                                    <th style="display:none;"></th>
                                    <th style="display:none;"></th>
                                    <th style="display:none;"></th>
                          
                                    <th></th>
                                  </tr>
            <tr>
            <td style='display: none;'>id</td>
            <td>name</td>
            <td>model</td>
            <td>facturer</td>
            <td>serial</td>
            <td>count</td>
            <td style='display: none;'>place</td>
            <td style='display: none;'>notes</td>
            <td style='display: none;'>updated</td>
            <td style='display: none;'>added</td>
            <td><i data-toggle="modal" data-target=".bd-example-modal-lg" class="icon fa-solid fa-eye"></i></td>';
            <td><a><i class="icon fa-solid fa-circle-minus"></i></a></td>';
          </tr>
          </table>
        </div>
        

          <!------------------------------------------------>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body">
            <form action="inserts.php" method="POST" id="form">
              <input type="text" id="name" class="form-control mb-1" name="name" placeholder="Produkttyp" value="" autocomplete="off">
              <input type="text" id="model" class="form-control mb-1" name="model" placeholder="Modell"  autocomplete="off">
              <input type="text" id="facturer" class="form-control mb-1" name="facturer" placeholder="Hersteller"  autocomplete="off">
              <input type="text" id="serial" class="form-control mb-1" name="serial" placeholder="Seriennummer"  autocomplete="off">
              <input type="text" id="place" class="form-control mb-1" name="place" placeholder="Ablageort" autocomplete="off">
              <input type="text" id="notes" class="form-control mb-1" name="notes" placeholder="Notiz"   autocomplete="off">
              <input type="text" id="updated" class="form-control mb-1" name="updated" placeholder="zuletzt geändert"  readonly autocomplete="off">
              <input type="text" id="added" class="form-control mb-1" name="added" placeholder="hinzugefügt" readonly  autocomplete="off">
          </div>
          <div class="modal-footer">
            <button type="submit" name="save" class="btn btn-primary" style="background-color: #F9B711; color: black;border: none;">Änderungen speichern</button>
            </form>
            <button type="button" class="btn btn-secondary trigger_close"  data-dismiss="modal" style="background-color: red; color: black; border: none;">schließen</button>
          </div>
    </div>
  </div>
</div>

<!-- Small modal -->

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body">
            <form action="inserts.php" method="POST" id="form">
              <input type="text" id="name" class="form-control mb-1" name="name" placeholder="Produkttyp" autocomplete="off">
                      <input type="text" id="name" class="form-control mb-1" name="model" placeholder="Modell"  autocomplete="off">
                      <input type="text" id="name" class="form-control mb-1" name="facturer" placeholder="Hersteller"  autocomplete="off">
                      <input type="text" id="name" class="form-control mb-1" name="serial" placeholder="Seriennummer"  autocomplete="off">
                      <input type="text" id="name" class="form-control mb-1" name="count" placeholder="Anzahl"  autocomplete="off">
                      <input type="text" id="name" class="form-control mb-1" name="place" placeholder="Ablageort" autocomplete="off">
                      <input type="text" id="name" class="form-control mb-1" name="notes" placeholder="Notiz"   autocomplete="off">
                      <select name="w" class="form-select">
                          <option value="NULL">Warnung bei niedrigem Bestand?</option>
                          <option value="y">Ja</option>
                          <option value="n">Nein</option>
                        </select>
          </div>
          <div class="modal-footer">
            <button type="submit" name="send" class="btn btn-primary" style="background-color: #F9B711; color: black;border: none;">einlagern</button>
            </form>
            <button type="button" class="btn btn-secondary create_close" data-dismiss="modalcreate" style="background-color: red; color: black; border: none;">schließen</button>
          </div>
    </div>
  </div>
</div>

I want that the data from the table (closest) is displayed in the Inputs from the first modal.

Getting undefined from state while using useEffect and useState

My issue here is that sometimes my projects state is returning undefined sometimes. I am not sure why. As you can see, in the useEffect I have a function that gets project data from an API call to my backend server. This will then return an array of projects, which I then planned to see in the dom in the return statement. However, for whatever reason, upon the initial render it gives me an undefined and the screen goes white.

Strangely, enough, if I change the return statement to just display a regular string, let’s say “hello” for example, save, and then change it back to {projects[0].name} it will then work. Yet on initial render I am getting a Uncaught TypeError: Cannot read properties of undefined (reading ‘name’);

I will add that I am getting a 304 status from my server in the console but that is because the data has not changed and thus I am receiving the previous UI from local storage if I remember correctly. This is not an issue with other parts of my application so I do not know why it would be an issue here.

import { useEffect, useState } from "react";
import { fetchPage } from "./../store/actions"
import { connect } from "react-redux"
/*import { ProjectCard } from "./../components/ProjectCard"*/
import API from './../api/API'
const Projects = ({ fetchPage }) => {
    const [projects, setProjects] = useState([])

    useEffect(() => {
        const getProjectData = async () => {
            try {
                const { data } = await API.getAllProjects()
                setProjects(data.data)
            } catch (err) {
                console.log(err);
            }
        }
        fetchPage('Projects', "Here are your projects")
        getProjectData()
    }, [fetchPage])
    return (<div>
        {projects[0].name}
    </div>)
}

export default connect(null, { fetchPage })(Projects);

Here is a different part of my application that works more or less the same way

const [users, setUsers] = useState([])
    useEffect(() => {
        const getUserData = async () => {
            
                const { data } = await axios.get('/api/v1/users', {
                    headers: {
                        'Content-type': 'application/json'
                    }
                })
                setUsers(data.data.data)
            
        }
        fetchPage("TEAM", "Here is your team");
        getUserData();
    }, [fetchPage])

I tried removing the action creator which I expected did not work

Adding same event to multiple elements [duplicate]

I’m trying to create a simple HTML file for mouse click unit testing; the file would contain div elements integrated with simple onClick and onDblClick events. How do I do that? Here’s the code so far:

function testClickFunction(){
let els = document.querySelectorAll("div");
els.forEach(el => {
    el..addEventListener('click', (event)=> {
        var el_id = el.getAttribute("id")
        document.GetElementById(el_id).innerHTML = "Element clicked";
    });
}
}
div {
padding: 70px;
width: 70px;
border: 1px solid #4CAF50
}
<div id="el_0" onclick="testClickFunction()">Element 0</div>
<div id="el_1">Element 1</div>
<div id="el_2">Element 2</div>
<div id="el_3">Element 3</div>
<div id="el_4">Element 4</div>
<div id="el_5">Element 5</div>
<div id="el_6">Element 6</div>
<div id="el_7">Element 7</div>
<div id="el_8">Element 8</div>
<div id="el_9">Element 9</div>
<div id="el_10">Element 10</div>
<div id="el_11">Element 11</div>
<div id="el_12">Element 12</div>
<div id="el_13">Element 13</div>
<div id="el_14">Element 14</div>
<div id="el_15">Element 15</div>
<div id="el_16">Element 16</div>
<div id="el_17">Element 17</div>
<div id="el_18">Element 18</div>

How to set the style on SVG retrieved from the geojson file with Leaflet?

I was able to display the map from the geojson file.
But CSS I wrote and the actual display doesn’t match like img below.

Developer tool display

I wrote CSS like below.
I have to set the overflow as visible.

body, #map {
   overflow: visible;
   zoom: 100%;
   width: 1500px;
   height: 1000px;
   margin: 0px;
   padding: 0px;
}

The actual style of SVG is below.

<body>
<div id="map" class="leaflet-container leaflet-touch leaflet-fade-anim" tabindex="0" style="position: relative;"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"></div><div class="leaflet-pane leaflet-overlay-pane">
<svg pointer-events="none" width="1800" height="1200" viewBox="-150 -100 1800 1200" style="transform: translate3d(-150px, -100px, 0px);">
<g>~~~</g>
</svg>~~~

What makes width=1800 and height=1200 although I set width=1500 and height=1000?
The code for getting data from the geojson file is below.

$.getJSON("japan.geojson", function(data) {
    let geojsonback = L.geoJson(data, {
        onEachFeature: function (feature, layer) {
                    },
    });
    geojsonback.addTo(map);
    });

I would like to match atcual style of SVG and CSS I wrote.

I have already tried adding style like below but it didn’t work well.

const myPolygonStyle={
    "width":1500,
    "viewBox":"0 0 1500 1000"
}
$.getJSON("japan.geojson", function(data) {
    let geojsonback = L.geoJson(data, {
        style:myPolygonStyle,
        onEachFeature: function (feature, layer) {
                    },
    });
    geojsonback.addTo(map);
    console.log(geojsonback)
    });

copy to clipboard for each list

i’ve got two list black and white numbers in JS Vue
for each one i made a button when i click on it the related numbers of list copy to clipboard
but only my white list copy to clipboard…any idea?

const copyClipBoard = (isWhite) => {
  let params;
  if (isWhite) params = selectedFiltersWhite.filters;
  else params = selectedFiltersBlack.filters;
  const data = { filter: { filters: params } };
  const token = settings.get("token");
  const baseUrl = import.meta.env.VUE_APP_SERVER;
  axios({
    method: "get",
    url: baseUrl + `api/v1/user/check-blacklist/`,
    params: data,
    headers: { Authorization: "Bearer " + token }
  }).then((res) => {
      const array: any = [];
      res.data.data.items.forEach((el: any) => {
        array.push(el.number);
        navigator.clipboard.writeText(array);
      });
      message.success("copeid");
    }).catch(error => {
      message.error("something went worng");
      console.log(error);
    });
};

Dropdown toggle not working in bootstrap 5

Its not working once I upgrade into Bootstrap 5.

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria- controls="navbarCollapse" aria-expanded="false" aria- label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

How to auto generate divs with javascript?

I made a basic javascript code so you can poke divs with you mouse.

Unfortunately I have to add them manualy but i wanna add so much of them with a pattern.
First i decided to use grid but i guessed it wont work because divs (which i call them squares from now on :D) can change their position.

So I was about to ask, how can I create a javascript code that i can spawn them until they fill the screen.

Also i have another question which is realted to this project, How can i make these squares just decors. I mean by decors i dont want them to effect the webside at all, when the blocks goes out of the screen the body starts to expend, is there any way to avoid that?

(Also it will be better if you make the snippet full screen!)

speedX = 0
speedY = 0


square = document.getElementsByClassName("square")

document.onmousemove=function(e){
    speedX = e.movementX;
    speedY = e.movementY;

    posX = e.pageX;
    posY = e.pageY;

}


setInterval(() => {

    movement = Math.sqrt(speedX*speedX + speedY*speedY)
    speed = movement * 10

}, 100);



function AddSquare(){
    const newDiv = document.createElement("div")
    const parent = document.querySelector(".background")
    newDiv.classList.add("square")
    parent.appendChild(newDiv)

}


for (let i = 0; i < square.length; i++) {
    const element = square[i];

    element.style.backgroundColor = element.getAttribute("color")

    element.addEventListener('mouseover',() => {
        const y = speedY
        const x = speedX
    
        const rad = Math.atan2(y, x)
        yAxis = movement * Math.sin(rad)
        xAxis = movement * Math.cos(rad)
    
        element.style.left = `${Math.round(element.getBoundingClientRect().x + xAxis * 3)}px`
        element.style.top = `${Math.round(element.getBoundingClientRect().y + yAxis * 3)}px`

        element.style.transform = `rotate(${rad * (180/Math.PI)}deg)`
    
    
    });
    
}
body{
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;

}

.square{
    background-color: lightcoral;
    width: 75px;
    height: 75px;
    position: absolute;
    transform: rotate(0deg);

    transition: all ease-out 0.5s;
    
}

#Header{
    font-size: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="css.css">

    <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>Document</title>
</head>
<body>
    

    <div class="background">
        <div class="square" style="top: 150px; left: -20px;" color="lightcoral"></div>
        <div class="square" style="top: 150px; left: 80px;" color="bisque"></div>
        <div class="square" style="top: 150px; left: 180px;" color="lightcoral"></div>
        <div class="square" style="top: 150px; left: 280px;" color="aquamarine"></div>
        <div class="square" style="top: 150px; left: 380px;" color="bisque"></div>
        <div class="square" style="top: 150px; left: 480px;" color="lightcoral"></div>
        <div class="square" style="top: 150px; left: 580px;" color="aquamarine"></div>
        <div class="square" style="top: 150px; left: 680px;" color="bisque"></div>
        <div class="square" style="top: 150px; left: 780px;" color="lightcoral"></div>
        <div class="square" style="top: 150px; left: 880px;" color="aquamarine"></div>
        <div class="square" style="top: 150px; left: 980px;" color="bisque"></div>
        <div class="square" style="top: 150px; left: 1080px;" color="lightcoral"></div>
    
        <div class="square" style="top: 250px; left: -30px;" color="cadetblue"></div>
        <div class="square" style="top: 250px; left: 70px;" color="cadetblue"></div>
        <div class="square" style="top: 250px; left: 170px;" color="greenyellow"></div>
        <div class="square" style="top: 250px; left: 270px;" color="yellowgreen"></div>
        <div class="square" style="top: 250px; left: 370px;" color="cadetblue"></div>
        <div class="square" style="top: 250px; left: 470px;" color="greenyellow"></div>
        <div class="square" style="top: 250px; left: 570px;" color="yellowgreen"></div>
        <div class="square" style="top: 250px; left: 670px;" color="cadetblue"></div>
        <div class="square" style="top: 250px; left: 770px;" color="greenyellow"></div>
        <div class="square" style="top: 250px; left: 870px;" color="yellowgreen"></div>
        <div class="square" style="top: 250px; left: 970px;" color="cadetblue"></div>

    
        <div class="square" style="top: 350px; left: -40px;" color="lightcoral"></div>
        <div class="square" style="top: 350px; left: 60px;" color="bisque"></div>
        <div class="square" style="top: 350px; left: 160px;" color="lightcoral"></div>
        <div class="square" style="top: 350px; left: 260px;" color="aquamarine"></div>
        <div class="square" style="top: 350px; left: 360px;" color="bisque"></div>
        <div class="square" style="top: 350px; left: 460px;" color="lightcoral"></div>
        <div class="square" style="top: 350px; left: 560px;" color="aquamarine"></div>
        <div class="square" style="top: 350px; left: 660px;" color="bisque"></div>
        <div class="square" style="top: 350px; left: 760px;" color="lightcoral"></div>
        <div class="square" style="top: 350px; left: 860px;" color="aquamarine"></div>
        <div class="square" style="top: 350px; left: 960px;" color="bisque"></div>
    </div>

    Work in progress...

    <div class="container text-center">
        <div class="row">
            <div class="col"><h1 id="Header">Work in progress...</h1></div>
        </div>
    </div>


    <script type="text/javascript" src = "javascript.js"></script> 

</body>
</html>

Datepicker getData() resulting in null

I’m new with datepickers, and in order to get a date picked by a user I’m using the function getData(), I’ve seen a lot of examples of people using this function and getting the date picked by the user correctly, however, when I use it and the console.log the result, it comes out as null, here’s my HTML and JS for this datepicker

HTML:

<label for="datePickerOrders" class="labelDateOrders">Date:</label>
  <input type="date" id="dateFood" class="datePickerOrders" name="datePickerOrders">

JS:

$(".datePickerOrders").change(async (event) => {

  const dateSelected = $(".datePickerOrders").datepicker("getDate");
  console.log(dateSelected);

});

I was expecting that the date picked was actually logged in the console, however, the output is Null

How to read a csv file using jQuery and html and check a condition

I want to read a csv file using jQuery and html and see if a condition applies to the cell. So basically I have a csv file with transactions and I want to check if that transaction matches with my keyword and then the program would give it a certain id number

This is all I got up to:

Upload

$(document).ready(function(){
$(“#upload”).clicked(function(){

  })
});

});