Category: javascript

I am working on a chrome extension that would inject a script on any page and get the mouse position whenever the mouse move, now everything is working fine and getting the positions whenever the mouse moves on the document, but when the mouse moves inside an iframe, its not showing the positions

const consoleMouse = (e) => {
        const { clientX, clientY } = e;
    
        console.log(`mouse at ${clientX} and ${clientY}`)
    }

    useEffect(() => {
        window.addEventListener("mousemove", consoleMouse);
        return () => {
            window.removeEventListener("mousemove", consoleMouse);
        }
    }, [consoleMouse])

I have tested some chrome extensions that are able to overlay their custom svg on top of an iframe, for example ColorZilla

Actually I want to fetch Netflix video streaming Not only poster how I can do this I have fetched poster title and description of Netflix

I aspects how to fetch video streaming through API of Netflix and also I want to add download button that can give us the size of 480p 720p and 1080p option
How to code it

So, I want to somehow display the input values from an HTML login form to another form like a dashboard. The input values of name/username and other info are displayed in a separate form. How do I get the value and display it in the dashboard? Should I use javascript or PHP? I’m still an amateur so I hope anyone can help me and explain. If possible show me a code on how to display the information to another HTML based on the login form I posted below.

<form action="action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

I made the login form but I’m still confused about how to display the input value from the form to another html file. I tried looking it up but there is no exact explanation on how to do it.

I am trying to use webrtc in my web app, below is my code

const localVideoEl = document.getElementById("local-video");

const call = async (e) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  });
  localVideoEl.srcObject = stream;
};

document.getElementById("call").addEventListener("click", call);

The problem is as soon as the stream starts I get lot of background noise and echo. I tried with both headset and without it but same issue, I have a brand new MacBook and I have not changed any audio settings. When I use Microsoft Teams, Google Meet or Slack then I don’t face such issue.

I am encountering a CORS issue that specifically arises when my browser is set to reflect Spain as the location, or when I am physically in Spain. The issue is related to the “Accept-Language” header being blocked, which is crucial for my application as it dynamically adjusts reCAPTCHA based on the user’s language preferences.

Access to script at ‘https://www.gstatic.com/recaptcha/releases/rz4DvU-cY2JYCwHSTck0_qm-/recaptcha__es.js’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: Request header field accept-language is not allowed by Access-Control-Allow-Headers in preflight response.

Specific Context:

• This CORS error pops up only when the browser settings indicate Spain as the location or when accessing the service from within Spain.
• The application dynamically loads the Spanish language version of Google reCAPTCHA based on these settings.

Questions:

• Why would the “Accept-Language” header cause a CORS issue specifically when set to target Spain? Is this a known problem with how Google reCAPTCHA handles language or region-specific requests?
• What are the recommended steps to configure CORS headers, or adjust browser settings, to avoid such issues specifically for users in or from Spain?
• Are there any workarounds or best practices that other developers have used when facing similar geographically specific CORS issues with reCAPTCHA?

When I define a test that fails using normal chai like so:

it("Should fail 1", async () => {
    expect(1).to.equal(2);
});

I get the following error:

         Should fail 1:

      AssertionError: expected 1 to equal 2
      + expected - actual

      -1
      +2
      
      at /home/myComputer/tests/myTest.ts:10:26
      at Generator.next (<anonymous>)
      at new Promise (<anonymous>)
      at __awaiter (tests/staking.ts:27:12)
      at Context.<anonymous> (tests/staking.ts:45:33)
      at processImmediate (node:internal/timers:478:21)

I.e. the first line tells me my AssertionError comes from line 10 in myTest.ts.

When I try to test promises though, such as

it("my test 2", async () => {
    await expect(Promise.reject("test")).to.be.fulfilled;
});

I only get

         my test 2:
     AssertionError: expected promise to be fulfilled but it was rejected with 'test'

This is very annoying, as this error doesn’t tell me anything about where in my test the error actually occured. How do I make it tell me where the error actually occured?

The way I import chai and chai-as-promised is like so in case that matters:

import chai from "chai";
import chaiAsPromised from 'chai-as-promised';
chai.use(chaiAsPromised);
const expect = chai.expect;

I’m sorry for the broken English.
I use quasar using typescript code inside the file .vue (vue 3). I created the interface and imported it import { ICut, ICutMasterItem } from '@/models/cut/cut';, after which if I delete the interface ICut from the file, the project will still assemble and only the IDE will give an error, how to make the project not assemble.
enter image description here
enter image description here

I tried to find the necessary eslint rules and connected different plugins, but I didn’t work out any of them

I met the issue of routing to wrong page and hit the error message of “Session is using/detected another tab opened”, if UUID is not found. My desired solution is it should routing to self-defined session.js and prompt self-defined message, if UUID is not found.

I used window.sessionStorage to keep the value of UUID, where UUID as a parameter to set and get the session generated by backend.
Every UI pages (cshtml) will use the UUID as the parameter in javascript and check if UUID is matched with session generated from backend. The codes are shown as below.

<script>
checkSession(window.sessionStorage.getItem("UUID"));
</script>

The function checkSession will uses ajax to access to the API and get back response.
If the response is 0, it should prompt us for the button choices of “Continue(Go back Home page)” or “Cancel”. But somehow, instead of showing the self-defined prompt, it redirect back to home page and prompt “Session is using/detected another tab opened”. The redirect code are shown as below.

window.open(parentHomeUrl, '_top')

Is there any way that do prompt correctly before going back to home page, and stop prompt the error message “Session is using/detected another tab opened”?

ths is the error code from flutter/dart/vscode
enter image description here

im using jdk 1.8

Could not run phased build action using connection to Gradle distribution ‘https://services.gradle.org/distributions/gradle-7.6.3-all.zip’.
Unable to start the daemon process.
This problem might be caused by incorrect configuration of the daemon.
For example, an unrecognized jvm option is used.
Please refer to the User Manual chapter on the daemon at https://docs.gradle.org/7.6.3/userguide/gradle_daemon.html
Process command line: C:Program FilesJavajava-se-8u43-ribinjava.exe -Xmx4G -Dfile.encoding=utf8 -Duser.country=MY -Duser.language=en -Duser.variant -cp C:Usersblack.gradlewrapperdistsgradle-7.6.3-allaocdy2d2z8kodnny3rsumj8i8gradle-7.6.3libgradle-launcher-7.6.3.jar org.gradle.launcher.daemon.bootstrap.GradleDaemon 7.6.3
Please read the following process output to find out more:

Error: Could not create the Java Virtual Machine.
Error: A fatal exception has occurred. Program will exit.
Invalid maximum heap size: -Xmx4G
The specified size exceeds the maximum representable size.

idk idk idk idkidkidkidkidkidk

I need to write a custom JSON.stringify function that ensures numbers that end with .0 retain their decimal values, like when passed through .toFixed(). I understand that this is not how javascript numbers work, the requirement comes from my users. If a value an integer and does not include a .0, it should remain an integer without a decimal place. If a value is a float, it should remain a float. And if a value is a float with any .0000… type empty value in the decimal place, it should remain a float with the same number of zeroes in the decimal place.

I have written the following function:

function monacoStringify(json: any, spacing: number) {
    return JSON.stringify(json, (key: string, value: any) => {
        if(typeof value === 'number') {
            const numString = `${value}`;
            const dotIdx = numString.indexOf('.');
            if(dotIdx !== -1) {
                const dotSplit = numString.split('.');
                const numsAfterDecimal = dotSplit[1].length;
                return value.toFixed(numsAfterDecimal);
            }
            return value;
        }
        return value;
    }, spacing)
}

export default monacoStringify;

That I directly pass the following Ajax response:

Ajax response

But the value variable on line 3 is 13, not 13.0 like it says in the developer console’s network response tab.

Is there any way to keep these values formatted exactly the way they are received?

I’m still a begginer in html, css, and javascript. I watched a tutorial on youtube and decided to try it, I added a few changes and it’s working fine, until the diary section started to appear on the teachers section, which is completely a different section.

This is the teacher section (teachers section). But as you can see (diary section), the image I put in the diary section is appearing under the teachers section, behind the elements of the teachers section.

This is the html code:

<!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>DEAR ST. LORENZO RUIZ</title>

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    
    <!-- custom css file link  -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    

<!-- header section starts  -->

<header class="header">

    <a href="#" class="lsclogo">
        <img src="images/lsclogo.png" width="8%" height="8%" alt="">
    </a>

    <nav class="navbar">
        <a href="#headstart">headstart</a>
        <a href="#background">background</a>
        <a href="#students">students</a>
        <a href="#teachers">teachers</a>
        <a href="#diary">diary</a>
        <a href="#memes">memes</a>
        <a href="#group">group</a>
    </nav>

    <div class="icons">
        <div class="fas fa-search" id="search-btn"></div>
        <div class="fas fa-bars" id="menu-btn"></div>
    </div>

</header>

<!-- header section ends  -->


<!-- headstart section starts  -->

<section class="headstart" id="headstart">

    <div class="content">
        <h3>Dear St. Lorenzo Ruiz</h3>
        <p>Warm greetings from the one and only humble section, 9 St. Lorenzo Ruiz.</p>
    </div>

</section>

<!-- headstart section ends  -->


<!-- background section starts  -->

<section class="background" id="background">

    <h1 class="heading"> something <span>about</span> us </h1>

    <div class="row">

        <div class="image">
            <img src="images/about us.jpeg" alt="">
        </div>

        <div class="content">
            <h3>What makes us St. Lorenzo, a Lorenzo?</h3>
            <p>Some of us are blessed with inteligence, some of us are artists, musicians, singers, dancers, and many more. And Of course, hindi rin mawawala ang mga pasaway sa room, sometimes called as the geng geng boys ng lorenzo.</p> <br>
            <p>Above everything, we are all stil unique in different ways.</p>
        </div>

    </div>

</section>

<!-- background section ends  -->


<!-- students section starts  -->

<section class="students" id="students">

    <h1 class="heading"> the <span>students</span> of st. lorenzo ruiz </h1>
        
    <div class="row">
        
        <div class="column">
            <img src="images/lance.jpg" width="100%" height="100%" alt="">
            <h2>Acoba, Lance Julian</h2>
        </div>

        <div class="column">
            <img src="images/qatlyn.jpg" width="100%" height="100%" alt="">
            <h2>Altoveros, Qatlyn Rexi</h2>
        </div>

        <div class="column">
            <img src="images/justine.jpg" width="100%" height="100%" alt="">
            <h2>Asuncion, Justine Clyde</h2>
        </div>

        <div class="column">
            <img src="images/rhyeiza.jpg" width="100%" height="100%" alt="">
            <h2>Balmaceda, Rhyeiza Bless</h2>
        </div>

        <div class="column">
            <img src="images/rainier.jpg" width="100%" height="100%" alt="">
            <h2>Baltazar, Ranier</h2>
        </div>

        <div class="column">
            <img src="images/kimberly.jpg" width="100%" height="100%" alt="">
            <h2>Barakel, Kimberly Joy</h2>
        </div>

        <div class="column">
            <img src="images/harry.jpg" width="100%" height="100%" alt="">
            <h2>Bayang, Adrienne Harry</h2>
        </div>

        <div class="column">
            <img src="images/carla.jpg" width="100%" height="100%" alt="">
            <h2>Bautista, Carla Mae</h2>
        </div>

        <div class="column">
            <img src="images/jek.jpg" width="100%" height="100%" alt="">
            <h2>Carorocan, John Gerald *unable to find pictures*</h2>
        </div>
        
    </div>

</section>

<!-- students section ends  -->


<!-- teachers section starts  -->

<section class="teachers" id="teachers">

    <h1 class="heading"> the <span>teachers</span></h1>

    <div class="container">

        <div class="adviser">
            <img src="images/sireugie.jpg" width="20%" height="20%" alt="">
            <h2> Eugiemhar S. Videra </h2>
            <p> - Our one and only humble and loving adviser. Laging mabait, mainit lang ang ulo 'pag maingay ang lorenzo</p>
            <p> - Siya lagi nagpapa-ayos sa'min ng gym huhu</p>
        </div>

        <div class="comp">
            <img src="images/sirmacky.jpg" width="20%" height="20%" alt="">
            <h2> Macky Ibay </h2>
            <p> - Tatay ni vernix </p>
            <p> -Poging computer teacher</p>
        </div>

        <div class="science">
            <img src="images/sirvill.jpg" width="20%" height="20%" alt="">
            <h2> Villamor Toquero </h2>
            <p> - Pinaka mabait na science teacher</p>
            <p> - The best science teacher st. lorenzo ruiz could ever have</p>
        </div>

        <div class="english">
            <img src="images/sirace.jpg" width="20%" height="20%" alt="">
            <h2> Aceyork Claro </h2>
            <p> - Teaches english very well </p>
        </div>

        <div class="socsci">
            <img src="images/sirniño.jpg" width="20%" height="20%" alt="">
            <h2> Niño Jay Robles </h2>
            <p> - Magaling magturo ng economics (may natututunan) + hindi masyadong boring yun subject kasi siya yun nagtuturo</p>
            <p> - Poging SOCSCI teacher din</p>
        </div>

        <div class="religion">
            <img src="images/ma'amerika.jpg" width="20%" height="20%" alt="">
            <h2> Erika Silverio </h2>
            <p> - Pinaka-batang religion teacher</p>
            <p> - The best magturo ng religion</p>
        </div>

        <div class="filipino">
            <img src="images/ma'amalpha.jpg" width="20%" height="20%" alt="">
            <h2> Alpha Mariz Binala </h2>
            <p> - Filipino teacher na kakaiba ang humor</p>
            <p> - Laging lt sa subject niya (minsan lang magalit)</p>
        </div>

        <div class="mapeh">
            <img src="images/ma'amsab.jpg" width="20%" height="20%" alt="">
            <h2> Sabrina Tanya Santos </h2>
            <p> - Open-minded na MAPEH teacher</p>
            <p> - The best magpalaro ng PE</p>
        </div>

        <div class="tle">
            <img src="images/ma'amregina.jpg" width="20%" height="20%" alt="">
            <h2> Regina Mhae Naval; </h2>
            <p> - Soft TLE teacher</p>
            <p> - Cute magalit (normal lang tone ng voice niya kahit galit)</p>
        </div>

    </div>

</section>

<!-- teachers sections ends  -->


<!-- diary section starts  -->

<section class="diary" id="diary">

    <h1 class="heading"> fun <span>memories</span> of st. lorenzo ruiz</h1>

    <div class="row">

        <div class="column">
            <img src="images/feastday.jpeg" alt="">
            <h2>feast day of st. lorenzo ruiz</h2>
            <p>this was our first picnic and bonding with sir eugie and it was fun. lahat kami ay may dala-dalang sariling foods na pinagsaluhan, we all shared each other's food (busog much). medyo magulo lang kasi kulang yun banig, pero masaya. hindi rin mawawala yun kalokohan ng boy, nagtago sila ng shoes and nilagay pa sa bubong yun iba. hay nako lorenzo. it went well though, lahat kami nabusog.</p>
        </div>

    </div>

</section>


<!-- diary section ends  -->





<!-- custom js file link  -->
<script src="js/script.js"></script>

</body>
</html>

This is the css code:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

:root{
    --main-color:#04246b;
    --black:#13131a;
    --bg:#add8e6;
    --border:.1rem solid rgba(0, 0, 0, 0.3);
}

*{
    font-family: 'Roboto', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: capitalize;
    transition: .2s linear;
}


html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 9rem;
    scroll-behavior: smooth;
}

html::-webkit-scrollbar{
    width: .8rem;
}

html::-webkit-scrollbar-track{
    background: transparent;
}

html::-webkit-scrollbar-thumb{
    background: #fff;
    border-radius: 5rem;
}


body{
    background: var(--bg);
}


section{
    padding:2rem 7%;
}


.heading{
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 3.5rem;
    font-size: 4rem;
}

.heading span{
    color: var(--main-color);
    text-transform: uppercase;
}


.header{
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:1.5rem 7%;
    border-bottom: var(--border);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: 10rem;
}

.lsclogo img{
    height: 10rem;
    width: 10rem;
}

.header .navbar a{
    margin:0 1rem;
    font-size: 1.6rem;
    color: #162a2c;
}

.header .navbar a:hover{
    color:var(--main-color);
    border-bottom: .1rem solid var(--main-color);
    padding-bottom: .5rem;
}

.header .icons div{
    color: #162a2c;
    cursor: pointer;
    font-size: 2.5rem;
    margin-left: 2rem;
}

.header .icons div:hover{
    color: var(--main-color);
}

#menu-btn{
    display: none;
}

.header .search-form{
    position: absolute;
    top:30%; right: 1%;
    background: #fff;
    width: 35rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    transform: scaleY(1);
    transform-origin: top;
}

.header .search-form.active{
    transform: scaleY(1);
}

.header .search-form input{
    height: 100%;
    width: 100%;
    font-size: 1.6rem;
    color:var(--black);
    padding:1rem;
    text-transform: none;
}

.header .search-form label{
    cursor: pointer;
    font-size: 2.2rem;
    margin-right: 1.5rem;
    color:var(--black);
}

.header .search-form label:hover{
    color:var(--main-color);
}


.headstart{
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:url(../images/headstart.jpeg);
    background-size: cover;
    background-position: center;
}

.headstart .content{
    max-width: 60rem;
}

.headstart .content h3{
    font-size: 6rem;
    text-transform: uppercase;
    color: #04246b;
}

.headstart .content p{
    font-size: 2rem;
    font-weight: normal;
    line-height: 1.8;
    padding:1rem 0; 
    color: #eee;
}


.background .row{
    display: flex;
    align-items: center;
    background:var(--main-color);
    flex-wrap: wrap;
}

.background .row .image{
   flex:1 1 61rem;
}

.background .row .image img{
    width: 100%;
}

.background .row .content{
    flex:1 1 45rem;
    padding:4.5rem;
    font-size: 1rem;
}

.background .row .content h3{
    font-size: 2rem;
    color: #fff;
}

.background .row .content p{
    font-size: 1.3rem;
    color: #ccc;
    padding:1 rem 0;
    line-height: 1.8;
}


.row .column{
    float: left;
    width:20%;
    padding:.1rem;
}

.row::after{
    content: "";
    display: table;
    clear: both;
}

.row .column h2{
    margin-left: 70px;
}

.row .column img:hover{
    background: #04246b;
}


.teachers .container{
    position: absolute;
    width: 90%;
    right: 4.5%;
    background-color: #04246b;
    padding: 110px;
}

.teachers .container .adviser img{
    float: left;
    width: 30;
    border: 10px solid #ddd;
    width: 150px;
}
.teachers .container .adviser h2{
    font-size: 2rem;
    color: #fff;
    margin-left: 17rem;
    }
    
.teachers .container .adviser p{
    font-size: 1.3rem;
    color: #ccc;
    padding:1 rem 0;
    line-height: 1.8;
    margin-left: 17rem;
}

.teachers .container .comp{
    margin-top: 12rem;
}

.teachers .container .comp img{
    float: right;
    width: 30;
    border: 10px solid #ddd;
    width: 150px;
}

.teachers .container .comp h2{
    font-size: 2rem;
    color: #fff;
    margin-left: 83rem;
    }
    
.teachers .container .comp p{
    font-size: 1.3rem;
    color: #ccc;
    padding:1 rem 0;
    line-height: 1.8;
    margin-left: 83rem;
}

.teachers .container .science{
    margin-top: 12rem;
}

.teachers .container .science img{
    float: left;
    width: 30;
    border: 10px solid #ddd;
    width: 150px;
}
.teachers .container .science h2{
    font-size: 2rem;
    color: #fff;
    margin-left: 17rem;
    }
    
.teachers .container .science p{
    font-size: 1.3rem;
    color: #ccc;
    padding:1 rem 0;
    line-height: 1.8;
    margin-left: 17rem;
}

.teachers .container .english{
    margin-top: 12rem;
}

.teachers .container .english img{
    float: right;
    width: 30;
    border: 10px solid #ddd;
    width: 150px;
}

.teachers .container .english h2{
    font-size: 2rem;
    color: #fff;
    margin-left: 83rem;
    }
    
.teachers .container .english p{
    font-size: 1.3rem;
    color: #ccc;
    padding:1 rem 0;
    line-height: 1.8;
    margin-left: 83rem;
}

.teachers .container .socsci{
    margin-top: 12rem;
}

.teachers .container .socsci img{
    float: left;
    width: 30;
    border: 10px solid #ddd;
    width: 150px;
}
.teachers .container .socsci h2{
    font-size: 2rem;
    color: #fff;
    margin-left: 17rem;
    }
    
.teachers .container .socsci p{
    font-size: 1.3rem;
    color: #ccc;
    padding:1 rem 0;
    line-height: 1.8;
    margin-left: 17rem;
}

.teachers .container .religion{
    margin-top: 12rem;
}

.teachers .container .religion img{
    float: right;
    width: 30;
    border: 10px solid #ddd;
    width: 150px;
}

.teachers .container .religion h2{
    font-size: 2rem;
    color: #fff;
    margin-left: 83rem;
    }
    
.teachers .container .religion p{
    font-size: 1.3rem;
    color: #ccc;
    padding:1 rem 0;
    line-height: 1.8;
    margin-left: 83rem;
}

.teachers .container .filipino{
    margin-top: 12rem;
}

.teachers .container .filipino img{
    float: left;
    width: 30;
    border: 10px solid #ddd;
    width: 150px;
}
.teachers .container .filipino h2{
    font-size: 2rem;
    color: #fff;
    margin-left: 17rem;
    }
    
.teachers .container .filipino p{
    font-size: 1.3rem;
    color: #ccc;
    padding:1 rem 0;
    line-height: 1.8;
    margin-left: 17rem;
}

.teachers .container .mapeh{
    margin-top: 12rem;
}

.teachers .container .mapeh img{
    float: right;
    width: 30;
    border: 10px solid #ddd;
    width: 150px;
}

.teachers .container .mapeh h2{
    font-size: 2rem;
    color: #fff;
    margin-left: 83rem;
}
.teachers .container .mapeh p{
    font-size: 1.3rem;
    color: #ccc;
    padding:1 rem 0;
    line-height: 1.8;
    margin-left: 83rem;
}

.teachers .container .tle{
    margin-top: 12rem;
}

.teachers .container .tle img{
    float: left;
    width: 30;
    border: 10px solid #ddd;
    width: 150px;
}
.teachers .container .tle h2{
    font-size: 2rem;
    color: #fff;
    margin-left: 17rem;
    }
    
.teachers .container .tle p{
    font-size: 1.3rem;
    color: #ccc;
    padding:1 rem 0;
    line-height: 1.8;
    margin-left: 17rem;
}

This is the javascript code:

let navbar = document.querySelector('.navbar');

document.querySelector('#menu-btn').oneclick = () =>{
    navbar.classList.toggle('active');
    navbar.classList.remove('active');
    searchForm.classList.remove('active');
}    

let searchForm = document.querySelector('.search-form');

document.querySelector('#search-btn').oneclick = () =>{
    searchForm.classList.toggle('active');
    navbar.classList.remove('active');
    searchForm.classList.remove('active');
}    

window.onscroll = () =>{
    navbar.classList.remove('active');
    searchForm.classList.remove('active');
}

I though the problem was the section tag. I tried rewriting the code in the diary section but it still doesn’t solve the problem.

List app works great until I add a keydown for the enter key. I can only get it to work if it’s outside of the newItem() function. When I have the keydown function inside of newItem() function, the input field just clears and I don’t get any errors, but nothing submits.

My problem is when I put the keydown function outside of newItem() function, the crossOutButton(), strike css feature, and sortable() don’t work because they’re now outside of the scope. I’m guessing there is a solution to where it can all go inside the newItem() function, but I’m stuck.

  <form name="toDoList">
                <input type="text" name="listItem" id="input">
            </form>

            <div onclick="newItem()" id="button">Add</div>
            <br/>
            <ol id="list"></ol>

function newItem() {

//Adds new item to the list
let li = $('<li></li>');
let inputValue = $('#input').val();
li.append(inputValue);

if (inputValue === '') {
    alert('You must write something');
} else {
    $('#list').append(li);
    //clears input field after selecting 'Add' button
    $('#input').val(''); 
}

//Crossing out an item from the list of items
function crossOut() {
    li.toggleClass('strike');
}

li.on('dblclick', function crossOut() {
    li.toggleClass('strike');
});

//Adding the delete button 'X'
let crossOutButton = $('<crossOutButton></crossOutButton>');
crossOutButton.append(document.createTextNode('X'));
li.append(crossOutButton);

crossOutButton.on('click', deleteListItem);
//Adding class delete (display: none) from css
function deleteListItem() {
    li.addClass('delete');
}

//reordering the items
$('#list').sortable();

}

//keydown function to listen for enter key
    $(document).ready(function() {
        $('#input').keydown(function(e) {
    
        //initialized variable and set as undefined
        let inputValue;
     
        if (inputValue === '') {
                alert("You must enter something");
        } else {
                //Enter key holds the value of 13
                if (e.keyCode === 13) {
                let li = `<li>${$(this).val()}</li>`;
                $('#list').append(li);
                console.log('Form submitted');
    
                e.preventDefault(); 
                //clears input field after hitting enter
                $('#input').val('');
                }
        }
        })
    });

When Use Javascript to try to POST something using method: 'POST' it for some reason resorts to GET. It gives me the error Cannot GET /openai/generateimage but I don’t understand why it won’t try to POST it.

const response = await fetch('/openai/generateimage', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    prompt,
    size,
  }),
});

I’ve coded a javascript function and I need to use the exact same code at least 6 different times in one page. Copy/pasting the function every time and switching out the IDs is going to get repetitive and take up a lot of space so I wanted to know if there’s a way I can use the one function for every instance I need it instead. It’s been hard trying to find a solution because the function effects three different elements at once so if anyone maybe has an idea of how to simplify the code that would be amazing.

I know the code here is invalid but here’s an example of what I’m trying to do plus the jfiddle I’ve been working on because I’m not fighting with this website’s formatting. The first one works how it’s supposed to, I don’t know how to duplicate that code for the other two examples.

var div1 = document.getElementById("image1");
var div2 = document.getElementById("image2");
const button = document.getElementById("button");


function myFunction() {
  if (button.innerHTML == ("see original")) {
    div2.style.animation = "show 1s 1 forwards";
    div1.style.animation = "shuffle 1s 1 forwards";
    button.style.animation = "nobtn1 1.75s 1 linear";
    button.innerHTML = "see official";
    div1.style.zIndex = "0";
    div2.style.zIndex = "1";
  } else {
    div1.style.animation = "show 1s 1 forwards";
    div2.style.animation = "shuffle 1s 1 forwards";
    button.style.animation = "nobtn2 2s 1 linear";
    button.innerHTML = "see original";
    div2.style.zIndex = "0";
    div1.style.zIndex = "1";
  }
}

<div class="thumbnail">
  <div class="roster">

    <div class="colourbox"></div>
    <img id="image1" src="#">
    <img id="image2" src="#">
    <div id="button" onclick="myFunction()">see original</div>

  </div>
</div>
<div class="thumbnail">
  <div class="roster">

    <div class="colourbox"></div>
    <img id="image1" src="#">
    <img id="image2" src="#">
    <div id="button" onclick="myFunction()">see original</div>

  </div>
</div>
<div class="thumbnail">
  <div class="roster">

    <div class="colourbox"></div>
    <img id="image1" src="#">
    <img id="image2" src="#">
    <div id="button" onclick="myFunction()">see original</div>

  </div>
</div>

https://jsfiddle.net/consumed_by_m0ss/vxdf6puh/208/

It might also be important to note that I’ve also tried in multiple different ways to switch the IDs to classes as suggested in some other posts I’ve seen, but that always causes an error that makes the code either unable to define the animation property or read the innerHTML

I have this string

PENNER,JANET E TR-50% & PENNER,MICHAEL G TR - 50% & SOURCE LLC & LARRY & FREDDY INC

and I want to split it up into groups like this

PENNER,JANET E TR

PENNER,MICHAEL G TR

SOURCE LLC

LARRY & FREDDY INC

I’m using javascript (node) with matchAll
and this is my attempt so far

/s*([^&]+) ((L.?L.?C.?)|(T.?R.?)|(I.?N.?C.?)|(C.?O.?)|(REV LIV))(?=-)?/g

The hard part is that some business names include ampersands (&) so how would I do this?