Category: javascript

I am a new programmer and I recently started following a music-player tutorial, and I am experiencing a couple of issues with it.

Project Overview:

As previously described, it is a music-player project made with create-react-app. The objective is to click the image of the song of your choosing, and for the song to be played for you.

The Problem:

As of right now, the clickable images are listed on the left side of the music-player page, in turn, leaving a big chunk of the page empty. This space is still a list component, the Idea is for it to be filled with the title of the song it corresponds to. However I have no idea how to do it. How would I be able to add their respective titles to the list?

The Code

Turkish.js (music-player file):

import React, { Component,useRef, setStatus, status } from 'react';
import './Turkish.css';

import turk1 from "./music/turk1.mp3";
import turk2 from "./music/turk2.mp3"
import turk3 from "./music/turk3.mp3"
import turk4 from "./music/turk4.mp3"

export default function Turkish() {
    const data = [
        { imgSrc: 'turk1.png', audioSrc: turk1},
        { imgSrc: 'turk2.png', audioSrc: turk3 },
        { imgSrc: 'turk3.png', audioSrc: turk4 },
        { imgSrc: 'turk4.png', audioSrc: turk2 },
    ];

    return (
        <div className='Turkish'>
            <ol>
            
                {data.map(({ imgSrc, audioSrc }) => (
                    <MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
                ))}
            </ol>
        </div>
    );
  
}

const MediaComponent = ({ imgSrc, audioSrc }) => {
    const audioRef = useRef(null);
    const toggleAudio = () =>
      audioRef.current === null
        ? console.log("Audio component is not loaded yet.")
        : audioRef.current.paused
        ? audioRef.current.play()
        : audioRef.current.pause();

        
    return (
        <ol>
            <img src={imgSrc} onClick={toggleAudio} />
            <audio
                ref={audioRef}
                src={audioSrc}
                onLoad={() => setStatus({ ...status, isLoaded: true })}
                onPlay={() => setStatus({ ...status, isPlaying: true })}
                onPause={() => setStatus({ ...status, isPlaying: false })}
                onError={() => setStatus({ ...status, error: true })}
            />
        </ol>
    );
};

Turkish.css

.Turkish ol {
    cursor: grab;
    border: solid;
    border-color: #303030;
    border-width: 0.01px ;
    border-left: transparent;
    border-right: transparent;
    border-bottom: transparent;
   
}

Below I’ve attached an image of the design.

I am passing an object from server and I cannot see it pass functions.

here is my code.

const express = require('express');
const app = express();
const path = require('path');
//const router = express.Router();
const port = process.env.PORT || 8080;
//const __dirname = path.resolve();
app.use(express.static(path.join(__dirname)));
app.set('views', __dirname + '/');
app.engine('html', require('ejs').renderFile);
const bodyParser = require('body-parser');
app.use(bodyParser.json());
const Obj = require('./classfile')

app.get('/', function(req, res){
  res.render('main.html');
});

app.post('/', async function(req, res) {
  

  this.newObj = new Obj("Hyundai","2022");
  console.log(this.newObj);
  res.status(200).json(this.newObj);


});
app.listen(port);
console.log('Server started at http://localhost:' + port);

classfile.js file.

class Car {
    constructor (name, year) {
      this.name = name;
      this.year = year;
      //this.Func() = Func(tex);
      
    }
    Func(tex){
      return tex+" class";
    }
  }

module.exports = Car;

mainfile.js

function fetcher() {
    fetch('/',
      {
        method: "POST",
        body: JSON.stringify({"name": document.getElementById("name").value}),
        headers: { "Content-Type": "application/json" }
        }
    )

    .then(function(response) {
      return response.json();
    })
    .then(function(IDN) {
      var msg = eval(IDN);
      console.log(msg);
      
    });
  }

Here is the object before I pass it from express server

Car {name: ‘Hyundai’, year: ‘2022’} name:’Subaru’ year:’2022′
[[Prototype]]:Object constructor:class Car {n constructor (name,
year) {n this.name = name;n this.year = year;n
//this.Func() = Func(tex);n n }n Func(tex){n
return tex+” class”;n }n } Func:ƒ Func(tex){n return tex+”
class”;n } [[Prototype]]:Object

Here is what I see in browser console.

{name: 'Hyundai', year: '2022'}
name: "Subaru"
year: "2022"
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Just experimenting with JS. I have found something i cant get my head around.
I have this code

let a = prompt('title', setTimeout(() => {
    return 'yes'
}, 1000)); // running first time sets a = 2

// and then subsequent runs looks like a counter 

But what is this counter ? and why starting from 2? Where does the values come from? Why is it not returning yes?

I have the following case:

Time format and some description which is separated by a delimiter - (as like below)

00:00 - Hello element

I was using the below regex to detect the match

/((?:d{2,}:)?(?:[0-5]d):(?:[0-5]d)(s?-.w+))/g;

it matches only “00:00 – Hello” after space it’s not getting match. Here is the demo of it https://regex101.com/r/omUEHy/1

Kindly help to resolve this

I am developing a simple javascript console calculator, and I need to implement an array/list. My current idea is to create an array with three integers/elements (which the user would fill out), then (depending on what the user wants), the first two elements would be added/subtracted/divided/multiplied, and then the last element would be separately (not dependent on the first operator) added/subtracted/divided/multiplied with the answer from the first two elements.

The current array I have looks like this:

var equfirst = ["num1", "num2", "num3"];

All the elements in the array would be provided by the user.

“num1” and “num2” would be operated on first, then “num3” (as stated earlier). Or, would there be a separate way following the order of operations where the numbers could be operated in no specific order.

I have difficulty with multiple instance of components despite using different key values for them. For example, I make 2 simple pages and pass different props. However, only one of them would log or alert. Shouldn’t be one message from each component with their props? What did I miss here?

class Temp_page extends Component {
  constructor(props) {
      super(props);   
      console.log("props", props)
      alert("this.props.tag" + this.props.tag);    
  }
  render() {
    return ( <div id={this.props.tag}> {this.props.tag} </div>);
  }
}

And the routes:

      <Route key="11" path="/temp_1" element = {
        <Temp_page tag={"temp_1"}/>
      }/>     

      <Route key="22" path="/temp_2" element = {
        <Temp_page tag={"temp_2"}/>
      }/>     

I hope to climb this page, but I don’t know why I can’t climb it successfully.
I have no Python background!
I found this script on the Internet, but I don’t quite understand how to use this script. May I ask how you should use this script? Or tell me how to learn Python. I think Python is very simple and interesting.
If you can help me, I will be very funny, this thing I have been distressed for a lot of days, please big gods, teach me ok
This is my code: Please help me!!!

header = {
'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
'Accept-Encoding': 'gzip, deflate, br',
'Accept-Language': 'zh-CN,zh;q=0.9',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'Cookie': 'BIDUPSID=272A32E33F3DEA7C13D80C8EF8BB2040; PSTM=1628126145;,
'Host': 'mbd.baidu.com',
'Pragma': 'no-cache',
'Referer': 'https://facebug555.com',
'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"',
'sec-ch-ua-mobile': '?0',
'sec-ch-ua-platform': '"Windows"',
'Sec-Fetch-Dest': 'image',
'Sec-Fetch-Mode': 'no-cors',
'Sec-Fetch-Site': 'same-site',
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36'}
 page_html = requests.get(url='https://facebug555.com/blog', headers=header).text

this result:

<html lang="zh-CN" data-mode="light"><head>
<title>fb账号购买,fb账号,facebook账号购买,fb账号出售,投号玩家</title>
<script charset="utf-8" src="https://hmcdn.baidu.com/static/tongji/plugins/UrlChangeTracker.js"></script><script src="https://hm.baidu.com/hm.js?b2e95e2b202d58ac7eea516a181efdc0"></script>


<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
<meta name="keywords" content="fb账号购买,fb账号,脸书账号,facebook账号购买,投号玩家">
<meta name="description" content="fb账号购买,fb账号,脸书账号,facebook账号购买,投号玩家">
<meta name="author" content="投号玩家">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta name="site" content="https://www.facebug555.com/blog">

<meta property="og:image" content="">
<meta property="og:description" content="fb账号购买,fb账号,脸书账号,facebook账号购买,投号玩家">
<meta property="og:type" content="website">
<meta property="og:locale" content="zh_CN">
<meta property="og:site_name" content="fb账号购买,fb账号,facebook账号购买,fb账号出售,投号玩家">
<meta property="og:url" content="https://www.facebug555.com/blog">
<meta property="og:title" content="首页 – fb账号购买,fb账号,facebook账号购买,fb账号出售,投号玩家">
<meta property="twitter:partner" content="ogwp">
 <link rel="shortcut icon" size="32x32" href="">
<link rel="canonical" href="https://www.facebug555.com/blog">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="apple-touch-icon" sizes="180x180" href="">


<meta name="generator" content="Halo 1.5.1">
<script type="application/ld+json">{
        "@context": "http://schema.org/",
        "url": "https://www.facebug555.com/blog",
        "@type": "BreadcrumbList",
        "itemListElement": [{
          "@type": "ListItem",
          "position": 1,
          "name": "fb账号购买",
          "item": "https://www.facebug555.com/"
        },{
          "@type": "ListItem",
          "position": 2,
          "name": "fb账号购买 博客",
          "item": "https://www.facebug555.com/blog"
        }]
      }</script>


<div id="Joe">
<header class="joe_header">
<div class="joe_header__above">
<div class="joe_container joe_header_container">
<i class="joe-font joe-icon-caidan joe_header__above-slideicon"></i>
<a title="fb账号购买,fb账号,facebook账号购买,fb账号出售,投号玩家" class="joe_header__above-logo" href="https://www.facebug555.com/blog">
<img style="border-radius:4px" src="/upload/2022/02/%E6%8A%95%E5%8F%B7%E7%8E%A9%E5%AE%B6-25169996d5064acb960b5ddc15d13507.png" onerror="this.src='/themes/FaceBugBlog/source/img/logo.png'" alt="fb账号购买,fb账号,facebook账号购买,fb账号出售,投号玩家">
</a>
<nav class="joe_header__above-nav">
<a class="item" href="https://www.facebug555.com" target="_self" title="玩家官网">玩家官网</a>
<a class="item current" href="/blog" target="_self" title="首页">首页</a>
<a class="item" href="/blog/categories" target="_self" title="分类">分类</a>
</nav>
<form class="joe_header__above-search" method="get" action="https://www.facebug555.com/blog/search">
<input maxlength="16" autocomplete="off" placeholder="请输入关键字..." name="keyword" value="" class="input" type="text">
<button type="submit" class="submit" aria-label="搜索按钮"><i class="joe-font joe-icon-search"></i></button>
<span class="icon"></span>
<nav class="result">
<a href="/blog/archives/1020" title="科技快讯【2022年04月28日】" class="item">
<span class="sort">1</span>
<span class="text">科技快讯【2022年04月28日】</span>
</a>
<a href="/blog/archives/1019" title="Facebook的流量高效转化策略" class="item">
<span class="sort">2</span>
<span class="text">Facebook的流量高效转化策略</span>
</a>
</div>

<img width="100%" height="150" class="joe_header__slideout-image" src="/upload/2022/02/facebug-d57a054a38a94005b37f4b98d524486c.png" alt="侧边栏壁纸">
<div class="joe_header__slideout-author">
<img width="50" height="50" class="avatar lazyloaded" data-src="/upload/2022/02/telegram-16744a2dabef42b081f5abaa6c1c1573.png" src="/upload/2022/02/telegram-16744a2dabef42b081f5abaa6c1c1573.png" onerror="this.src='/upload/2022/02/telegram-16744a2dabef42b081f5abaa6c1c1573.png'" alt="博主头像">
<div class="info">
<a class="link" href="https://www.facebug555.com/blog" rel="noopener noreferrer nofollow">投号玩家</a>
<p class="motto joe_motto">一个在facebook江湖闯荡的骨灰级玩家</p>

<li>
<a class="link panel in" href="#" rel="nofollow">
<span>栏目</span>
<i class="joe-font joe-icon-arrow-right"></i>
</a>
<ul class="slides panel-body panel-box panel-side-menu" style="display: block;">
<li>
<a class="link" href="https://www.facebug555.com" title="玩家官网">玩家官网</a>
</li>
<li>
<a class="link current" href="/blog" title="首页">首页</a>
</li>
<li>
<a class="link" href="/blog/categories" title="分类">分类</a>

<div class="joe_header__searchout">
<div class="joe_container">
<div class="joe_header__searchout-inner">
<form class="joe_header__above-search-mobile" method="get" action="https://www.facebug555.com/blog/search">
<input maxlength="16" autocomplete="off" placeholder="请输入关键字..." name="keyword" value="" class="input" type="text">
<button type="submit" class="submit">
搜索</button>
</form>
</div>
</div>
</div>

<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-3464px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="4" style="width: 866px;">
<a class="item" href="/blog/archives/1020" rel="noopener noreferrer nofollow">
<img width="100%" height="100%" class="thumbnail lazyloaded" data-src="/upload/2022/04/6a144a3d1c844aa8976e7b80ace9c040.png" src="/upload/2022/04/6a144a3d1c844aa8976e7b80ace9c040.png" alt="科技快讯【2022年04月28日】">
<div class="title">科技快讯【2022年04月28日】</div>
<i class="joe-font joe-icon-zhifeiji"></i>
</a>
</div>

<p>
2022 ©<a href="https://www.facebug555.com/blog" rel="noopener noreferrer">投号玩家</a>


</body></html>

But if I make a post request, I get the following message

<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>cloudflare</center>
</body>
</html>

it can’t get the page code from post request
bug get request can get it
how ? why?
Why????

<p class="qn"><a href="#"> Question:What is JavaScript?</a></p>
    <p class="answ ">
      JavaScript is a lightweight, interpreted programming language with
      object-oriented capabilities that allows you to build interactivity into
      otherwise static HTML pages. The general-purpose core of the language has
      been embedded in Netscape, Internet Explorer, and other web browsers.
    </p>
    <p class="qn">
      <span> Question:</span> What are the data types supported by JavaScript?
    </p>
    <p class="answ ">
      The data types supported by JavaScript are: Undefined Null Boolean String
      Symbol Number Object
    </p>
    <p class="qn">
      <span> Question:</span> What is the purpose of ‘This’ operator in
      JavaScript?
    </p>
    <p class="answ ">
      The JavaScript this keyword refers to the object it belongs to. This has
      different values depending on where it is used. In a method, this refers
      to the owner object and in a function, this refers to the global object.
    </p>

.qn {
  user-select: none;
  position: relative;
  background-color: orangered;
  padding: 5px 0px 5px 10px;
  color: white;
  border-bottom: 1px solid #ddd;
}

.qn::after {
  content: "+";
  position: absolute;
  right: 10px;
  font-weight: bold;
}

.qn.active::after {
  content: "-";
}
.qn.active + .answ {
  display: block;
}

.answ {
  display: none;
}

const qn = document.querySelectorAll(".qn");
const answ = document.querySelectorAll(".answ");

// ————————————————————————
FUNCTION DECLARATION

// for (let i = 0; i < qn.length; i++) {
//   qn[i].addEventListener("click", showAnswer);

//   function showAnswer() {
//     qn[i].classList.toggle("active");
//   }
// }

// ————————————————————————-
FUNCTION EXPRESSION

for (let i = 0; i < qn.length; i++) {
  qn[i].addEventListener("click", function showAnswer() {
    qn[i].classList.toggle("active");
  });
}

// ———————————————————————

// ———————————————————————
//ARROW FUNCTION
??????
// ————————————————————————

How to implement this function expression or function declaration
with arrow function.

const qn = document.querySelectorAll(".qn");
const answ = document.querySelectorAll(".answ");

// ---------------------------------------------------------------------------------
//FUNCTION EXPRESSION

for (let i = 0; i < qn.length; i++) {
  qn[i].addEventListener("click", function showAnswer() {
    qn[i].classList.toggle("active");
  });
}
// ---------------------------------------------------------------------------------

 // ---------------------------------------------------------------------
//ARROW FUNCTION

   //???????????????????????
//??????????????????????? 
//???????????????????????                   
// ---------------------------------------------------------------------------------

// BOTH FUNCTION EXPRESSION AND ARROW FUNCTION WORKS WHAT I NEED TO KNOW IS HOW TO IMPLEMENT THIS
// WITH ARROW FUNCTION

// ---------------------------------------------------------------------------------
//ARROW FUNCTION

//???????????????????                  
// ---------------------------------------------------------------------------------

p.answ {
  background-color: green;
  padding: 5px 0px 5px 10px;
}

.qn {
  user-select: none;
  position: relative;
  background-color: orangered;
  padding: 5px 0px 5px 10px;
  color: white;
  border-bottom: 1px solid #ddd;
}

.qn::after {
  content: "+";
  position: absolute;
  right: 10px;
  font-weight: bold;
}

.qn.active::after {
  content: "-";
}
.qn.active + .answ {
  display: block;
}

.answ {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>
    <link rel="stylesheet" href="main.css" />
    <script src="jquery-3.6.0.js"></script>
  </head>
  <body>
  <p class="qn"><a href="#"> Question:What is JavaScript?</a></p>
    <p class="answ">
      JavaScript is a lightweight, interpreted programming language with
      object-oriented capabilities that allows you to build interactivity into
      otherwise static HTML pages. The general-purpose core of the language has
      been embedded in Netscape, Internet Explorer, and other web browsers.
    </p>
    <p class="qn">
      <span> Question:</span> What are the data types supported by JavaScript?
    </p>
    <p class="answ">
      The data types supported by JavaScript are: Undefined Null Boolean String
      Symbol Number Object
    </p>
    <p class="qn">
      <span> Question:</span> What is the purpose of ‘This’ operator in
      JavaScript?
    </p>
    <p class="answ">
      The JavaScript this keyword refers to the object it belongs to. This has
      different values depending on where it is used. In a method, this refers
      to the owner object and in a function, this refers to the global object.
    </p>

    <script src="main.js"></script>

    <p></p>
  </body>
</html>

function expression and function declaration is working. How to implement this code using Arrow function? Please help. Thank you.

I have a class that extends Array, and as part of it, I want to intercept changes that are made to its properties, so I use Proxy, which is what I return from its constructor. It works just fine until I try to use it in my Vue component. See this example. When you click the update button, you’ll see that the display doesn’t update. You’ll also notice that the watchEffect doesn’t fire, but we can see that our value was added to the array.

Does anyone know why this doesn’t work and how I can fix it? It feels like maybe my proxy is being tripped up with Vue’s proxy wrapper, but I don’t know enough about the internals to say that confidently.

Looking at the demo for scatter charts I can see what when two points overlap they become more opaque: https://www.highcharts.com/demo/scatter

I’m pulling data in from fields on a Drupal site, which is then building the JSON to feed to Highcharts via a contributed module which overrides the alpha transparency values and just outputs opaque / opacity = 1 <path> elements. I was able to feed the opacity back to the chart via passing in the proper API option ala $chart['series'][0]['opacity'] = .6; however the overlapping areas of points don’t turn into something like .8 like I would expect:

I haven’t been able to find the API call to manage this, is there some way I can pass a value via plotOptions.scatter.overlap or whatever to get this behaviour back?

currently i am trying to replace an elements children with the same value in an array

e.g:

const e = document.createElement("div");
e.className = "e";
e.innerHtml = "test ";
const a = [e, e, e];
// test is appearing only once instead of multiple times
document.body.replaceChildren(...a);

my code is this:

    class MockElement {
        constructor(className, children = []) {
            this.element = document.createElement("div");
            this.className = className;
            this.children = children;
            this.element.className = className;
            console.log(Array(children))
            if (children) this.element.replaceChildren(...Array(children));
        };
        replaceChildren(c) {
            this.children = c;
            this.element.replaceChildren(...c);
        };
    };

    //const wrapper = document.getElementById("centirdle-boards");



    const fill = (c, t) => {
        // init new array
        let a = new Array();
        // loop through {t} times, adds new copy of {c} to the array each time
        for (let j = 0; j < t; j++) a.push( c );
        return a;
    };

    const h = new MockElement("h");
    // only seeing one of them
    document.body.replaceChildren(...fill(h.element, 5))

currently the fill function works fine and as intended
the mock element class also works fine

Can anyone tell me why I’m unable to detect the load event on this image element and set the loading gif to “display:none”? I’d like to set the div with the loader class to “display: none” when the first image loads after the “Add Image” button is clicked. right now it only sets the style after I click the Add Doggo button twice.

Here’s the code:

HTML:

    <title>image loader</title>
</head>
<body>
    <h1>Dog Images</h1>
    <button class="add-doggo">Add Image</button>
    <div class="doggos">
        <div class="loader"><img src="src/Preloader.gif" /></div>
    </div>

    <script src="src/doggos.js"></script>
</body>

CSS:

.loader {
    display: none;
}

JavaScript:

const DOG_URL = 'https://dog.ceo/api/breeds/image/random';

const doggos = document.querySelector('.doggos');
let loader = document.querySelector('.loader');

let dogImage, isLoaded;

function addNewDoggo() {
    const promise = fetch(DOG_URL);
    promise

        .then(function (response) {
            const processingPromise = response.json(); //This line of code parses the API response into a usuable js object
            return processingPromise; //this code returns a new promise and this process is called | PROCESS-CHAINING
        })
        .then(function (processedResponse) {
            const img = document.createElement('img');
            img.classList.add('dog-image');
            img.src = processedResponse.message;
            img.alt = 'Cute doggo';
            doggos.appendChild(img);
        });
}

document.querySelector('.add-doggo').addEventListener('click', () => {
    dogImage = document.querySelector('.dog-image');
    isLoaded = dogImage?.complete && dogImage?.naturalHeight !== 0;
    if (!isLoaded) {
        loader.style.display = 'block';
        console.log(true);
    } else if (isLoaded) {
        loader.style.display = 'none';
        console.log('IMAGE LOADED');
    }
    return addNewDoggo();
});

// Adding event listener on the image element itself to detect if it's loaded
document.querySelector('.dog-image').addEventListener('load', () => {
    console.log('DOG IMAGE LOADED');
    isLoaded = dogImage?.complete && dogImage?.naturalHeight !== 0;
    if (isLoaded) {
        loader.style.display = 'none';
    }
});

I am trying to create a function that grabs all elements with the same one class and validates that AT LEAST ONE of those elements is filled in.

I am wanting it to check for any element with the class of “rowvalidate” and ensure that at least one of the elements with that class is filled out entirely before allowing form submission. If someone decides to fill out multiple of these elements each element must be filled out completely.

Sorry if this question is poorly written, I am still new to posting on here. If you need more information let me know.

Below is my javascript, which I believe to be very incorrect:

var rows = document.getElementsByClassName("rowvalidate");
  for (i > 0; i++) {
    if (!myForm.rows.value.length) {
      valid = false;
      document.getElementById('row-error').style.display = "inline-block";
    } else {
      document.getElementById('row-error').style.display = "none";
    }
  }
}

And here is my HTML:

<table>
  <span class="form-error" id="row-error">At least one persons info must be entered</span>
    <tr class="rowvalidate">
        <th>1</th>
        <td>
            <label for="bfname1">Firstname</label>
            <input type="text" id="bfname1" name="firstname1">
        </td>
        <td>
            <label for="bsname1">Lastname</label>
            <input type="text" id="bsname1" name="surname1">
        </td>
        <td>
            <label for="borank1">Officer Rank</label>
            <input type="text" id="borank1" name="officerrank1">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" class="badge">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly class="price">
        </td>
    </tr>
    <tr class="rowvalidate">
        <th>2</th>
        <td>
            <label for="bfname2">Firstname</label>
            <input type="text" id="bfname2" name="firstname2">
        </td>
        <td>
            <label for="bsname2">Lastname</label>
            <input type="text" id="bsname2" name="surname2">
        </td>
        <td>
            <label for="borank2">Officer Rank</label>
            <input type="text" id="borank2" name="officerrank2">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" class="badge">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly class="price">
        </td>
    </tr>
    <tr class="rowvalidate">
        <th>3</th>
        <td>
            <label for="bfname3">Firstname</label>
            <input type="text" id="bfname3" name="firstname3">
        </td>
        <td>
            <label for="bsname3">Lastname</label>
            <input type="text" id="bsname3" name="surname3">
        </td>
        <td>
            <label for="borank3">Officer Rank</label>
            <input type="text" id="borank3" name="officerrank3">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" class="badge">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly class="price">
        </td>
    </tr>
    <tr class="rowvalidate">
        <th>4</th>
        <td>
            <label for="bfname4">Firstname</label>
            <input type="text" id="bfname4" name="firstname4">
        </td>
        <td>
            <label for="bsname4">Lastname</label>
            <input type="text" id="bsname4" name="surname4">
        </td>
        <td>
            <label for="borank4">Officer Rank</label>
            <input type="text" id="borank4" name="officerrank4">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" class="badge">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly class="price">
        </td>
    </tr>
    <tr class="rowvalidate">
        <th>5</th>
        <td>
            <label for="bfname5">Firstname</label>
            <input type="text" id="bfname5" name="firstname5">
        </td>
        <td>
            <label for="bsname5">Lastname</label>
            <input type="text" id="bsname5" name="surname5">
        </td>
        <td>
            <label for="borank5">Officer Rank</label>
            <input type="text" id="borank5" name="officerrank5">
        </td>
        <td class="form-element">
            <label for="badge3">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" class="badge">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly class="price">
        </td>
</table>

Thanks =)

I am trying to achieve something like:

async function getAppointmentData() {
  await page.goto('go to the page URL')
  let appointmentData = [];
  await page.waitForSelector(
      "[id*=dropdownId]"
    );

  for (let option of options) {
    // Selecting an option from a dropdown trigger a network call that I need to record
    await page.select(
        "select#dropdownId",
        option?.id
      )

   /* Check for a network call that contains that option?.id or .json?details
      Sample URL >>>> https://abc.test.com/en/10.json?details  [Where 10 is options?id]
   */
  // After All Items in dropdown is selected, Want to insert response [Array of Objects] to an object like:
   appointmentData.push({
     id: options?.id;
     data: [Array of Objects]
    }]

  } // For Loop Ends

  processAppointments(appointmentData )

}

I tried using page.on() and other methods but not helpful. can someone please help me out here? been stuck for almost one week.

This is three similar actions needed in one sheet. Hopefully this ends up being a useful question in general.

I have a script that copies the values of arbitrary cells on a sheet to a single row in another sheet, courtesy of doubleunary’s answer to a prior question. Now I need to know how to reset the input sheet to be ready for another entry.

Some cells need to be blank, some need to be zeroes, and some need to be reset to a default text value, which is stored on another sheet so it can be changed easily if needed.

The script for pulling the data is this:

function submitDataOhSoMuchFaster() {
  const ss = SpreadsheetApp.getActive();
  const values = ss.getActiveSheet().getRange('A1:Z13').getValues();
  const entry = [
    { column: 26, row: 12 }, // Z12
    { column: 3, row: 2 }, // C2
    { column: 14, row: 2 }, // N2
    { column: 3, row: 10 }, // C10
    { column: 6, row: 2 }, // F2
    { column: 3, row: 4 }, // C4
    { column: 5, row: 4 }, // E4
    { column: 3, row: 5 }, // C5
    { column: 5, row: 5 }, // E5
    { column: 12, row: 5 }, // L5
    { column: 12, row: 4 }, // L4
    { column: 26, row: 13 }, // Z13
    { column: 20, row: 4 }, // T4
    { column: 20, row: 5 }, // T5
    { column: 3, row: 6 }, // C6
  ];
  ss.getSheetByName('Master Log')
    .appendRow(entry.map(cell => values[cell.row - 1][cell.column - 1]));
};

I want to know if there is a way to elegantly reverse that, and either clear or write zeroes to a set of cells or ranges using a similar method, and how I would efficiently go about writing the values of a small array on a source sheet to arbitrary cells on the target sheet.

As examples, I need to:

Clear C4, E4, J10:J14, etc.

Zero T5:T6, D12:D15

Copy the contents of cell AT2 on one sheet to F2 on the target sheet, AT3 to C10, etc. (all the source data for this is in a single column, so an array seems workable)

I know how to do this in a lengthy manner that uses a ton of Clear, getValue and setValue commands, but how do I do it efficiently?