I have a dynamic array:

Var arr = ['first','second','third','so on...'];

I want to convert like this:

Var new_arr[first][second][third][so on...] = "test data";

I have followed a tutorial to make my first real project with electron, it is a to-do list app. I want the app to work over the http protocol as well. I ran the code over the file:/// protocol and everything worked perfectly as it did with electron. I made a quick python webserver that served index.html however now the code no longer works. More specifically the add task button no longer works. I will be including the repository that contains my code for more context.
repo: https://gitlab.com/Breadleaf/todo-list-electron

For a array of objects, and arrays

how to check based on conditions using javascript

In the array of objects, arrobj and obj

1. get the array of object having same value property and valueid property

2. If codevalue and cid value not same and cid value includes in listcode return empty array of object []

   else return that array of object by codevalue and cid in javascript

var listcode =["IN","FI", "FR"];
var arrobj =[
  {id:1, name: "abc", cid: "IN", value: "A1234"},
  {id:2, name: "xyz", cid: "SG", value: "B3456"},
  {id:3, name: "abi", cid: "SP", value: "B3456"},
  {id:4, name: "ken", cid: "FI", value: "C5678"},
]
var obj={
  id:5, name: "cool", codevalue: "SP", valueid:"B3456"
}

Expected Output
// codevalue and cid has same value and listcode value does not have, so fetch by value and valueid
[
  {id:3, name: "abi", cid: "SP", value: "B3456"},
  {id:2, name: "xyz", cid: "SG", value: "B3456"}
]

===
var listcode =["IN","FI","FR"];
var arrobj1 =[
  {id:1, name: "abc", cid: "IN", value: "A1234"},
  {id:2, name: "xyz", cid: "FI", value: "B3456"},
  {id:3, name: "abi", cid: "IN", value: "B3456"},
  {id:4, name: "ken", cid: "FI", value: "C5678"},
]
var obj1={
  id:5, name: "cool", codevalue: "SP", valueid:"B3456"
}
Expected Output
// not same cid and codevalue, all cid value have listcode
[]


===

var listcode =["IN","FI","FR"];
var arrobj2 =[
  {id:1, name: "abc", cid: "IN", value: "A1234"},
  {id:2, name: "xyz", cid: "FI", value: "B3456"},
  {id:3, name: "abi", cid: "SG", value: "B3456"},
  {id:4, name: "ken", cid: "FI", value: "C5678"},
]
var obj2={
  id:5, name: "cool", codevalue: "FI", valueid:"B3456"
}
Expected Output
// not same cid and codevalue, cid value dont have listcode value
[
 {id:2, name: "xyz", cid: "FI", value: "B3456"},
  {id:3, name: "abi", cid: "SG", value: "B3456"}
]

const result = arrobj.filter(e => e.value === obj.valueid && listcode.includes(e.cid));

THIS QUESTION IS ABOUT : finding a way to “stack” or create a waiting or queue…

NOTE : I did successful streams (webcam to server) but clogs very fast….

you can test it here : https://www.stubfees.com/templates/tests_ubox_slice/streamrtc3.php if you test with chrome, you’ll see jpg periodically of the mediarecorder sent blobs…

I have a javascript code to use mediaRecorder

*** FULL CODE HERE : https://github.com/jintor/stream_mediarecorder/blob/main/recorder.js

mediaRecorder.ondataavailable = handleDataAvailable;

mediaRecorder.start(3000); to send a portion every x seconds

a handleDataAvailable that takes the blob and convert to uint8

function handleDataAvailable(event) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(event.data); 
    reader.onloadend = async function(event) { 
        let arrayBuffer = reader.result; 
        let uint8View = new Uint8Array(arrayBuffer); 
        stubchunks(uint8View,order); // SLICE AND AJAX ASYNC AWAIT FETCH to send to server
        order += 1; 
    }
}

because it’s a uint8 I can slice it in smaller parts… I can receive at server side and save arrays in .txt than recombine all .txt into an array and with php pack I can reconvert the uint8 to binary.

**** NOTE : on chrome with vp9 => ffmpeg can easily reconvert each segments 😉

**** NOTE : on firefox with vp8 => ffmpeg can only reconvert the first segment

**** NOTE : on safari with any codec => I think async + await clogs everything and safari cannot handle sending anything 🙁

——— ISSUE : await + async + fecth seems to send,send,send without any waiting stack or queu…. after a few minutes the browser slowsdown……

so how can I create a waiting stack ?

List of possible approachs ?

• save in indexedDB and do a background sync with a worker.js ?

or any suggestions on implementing a waiting list ?

I have a keyword string that contains at least 1 wildcard letter; “?”.
Each “?” represents a single lowercase letter between a-z.
I need to search through an array of strings to find which letters match the keyword.

let input = ["happy", "have", "harvest", "harmonica"]

let keyword = "ha???"

result = "happy"

I’ve tried to replace the wildcard letter ? with regex, but it does not seem to work because it would return “ha/([a-z])+/g” and would not compare like I wanted it to.

I also tried to just replace ? with “”, but obviously it would match all of the items so it doesn’t work.

Is there any suggestions?

This is probably something really stupid but I cannot figure out why in the removal function when it’s called the node isn’t being mutated.

  class TreeNode {
        key: number;
        value: string;
        left: TreeNode;
        right: TreeNode;
        parent: TreeNode;
    
        // Key ID; Value: any;
        constructor(key: number, value: any) {
            this.key = key;
            this.value = value;
            this.left = null;
            this.right = null;
            this.parent = null;
        }
    }

export default TreeNode;

import TreeNode from './TreeNode.js';

const ErrorDuplicateKey =  new Error("duplicate key")
const ErrorKeyNoExist = new Error("key doesn't exist")
const ErrorNoRoot = new Error("no root")

// Right > 
// Left <
class Tree {
    root: TreeNode;
    _count: number;

    constructor() {
        this.root = null;
        this._count = 0;
    }

    count(): number {
        return this._count;
    }

    min(startingNode: TreeNode = this.root): TreeNode {
        if(!this.root) {
            return null;
        }

        let current = this.root;

        while(current) {
            if(current.left == null) {
                return current;
            }
            current = current.left;
        }
    }

    max(): TreeNode {
        if(!this.root) {
            return null;
        }

        let current = this.root;
        
        while(current) {
            if(current.right == null) {
                return current
            }

            current = current.right;
        }
    }

    insert(newKey: number, newValue: string) {
        this._count++;
        const newNode = new TreeNode(newKey, newValue)
        // If the root is nil set the root
        if(!this.root) {
            this.root = newNode;
            return this.root;
        }


       let current = this.root;
       while(current) {
            if(newKey === current.key) {
                return ErrorDuplicateKey;
            }

            if(newKey > current.key) {
                if(current.right === null) {
                    current.right = newNode;
                    return this;
                }
                current = current.right
                continue
            }

            if(newKey < current.key) {
                if(current.left === null) {
                    current.left = newNode;
                    return this;
                } 
                current = current.left
            }
       }
    }

    find(key: number): TreeNode {
        if(!this.root) {
            return null
        }

        let current = this.root;
        while(current) {
            if(current.key == key) {
                return current
            }

            if(key > current.key) {
                current = current.right
                continue;
            }

            if (key < current.key) {
                current = current.left
            }
        }

        return null;
    }

    remove(key: number): Tree  {
        if (!this.root) {
            return null;
        }

        let current = this.root;

        while(current) {
            // is leaf
            if(key === current.key) {
                if(current.right && current.left) {
                    console.log("right and left")
                    current = this.min(current.right)
                    continue;
                }

                if (!current.left && !current.right) {
                    console.log("is leaf")
                    current = null;
                    return this;
                }

                if(current.left === null) {
                    console.log("left is null")
                    current = current.right;
                    return this;
                }

                if(current.right === null) {
                    console.log("right is null")
                    current = current.left;
                    return this;
                }
            }

            if(key < current.key) {
                current = current.left;
            }

            if(key > current.key) {
                current = current.right;
            } 
        }

    } 

    dfsInOrder(): Array<number> {
        let nodesToVisit = [this.root];
        let visitedNodes = [];
        while(nodesToVisit.length > 0) {
            let current = nodesToVisit.pop()
            visitedNodes.push(current.key)
            if(current.left) {
                nodesToVisit.push(current.left)
            }
            if(current.right) {
                nodesToVisit.push(current.right)
            }
        }

        return visitedNodes;
    }

    isValidTree(): boolean {
        // Traverse Left
        let isValidLeft = true;
        
        let currentLeft = this.root;
        while(currentLeft) {
            if(currentLeft.left === null) {
                break;
            }
            if(currentLeft.left !== null) {
                // If the current node is less than the child node
                // Then we know that the tree is not valid because the child node 
                // should be greater than the current node because we're going right
                if(currentLeft.key < currentLeft.left.key) {
                    isValidLeft = false;
                }
                currentLeft = currentLeft.left;
            }
        }
        // Traverse Right
        let isValidRight = true;

        let currentRight = this.root;
        while(currentRight) {
            if(currentRight.right === null) {
                break;
            }

            if(currentRight.right !== null) {
                // If the current node is greater than the child node
                // Then we know that the tree is not valid because the child node 
                // should be greater than the current node because we're going right
                if(currentRight.key > currentRight.right.key) {
                    isValidRight = false;
                }
                currentRight = currentRight.right;
            }
        }

        return isValidLeft && isValidRight;
    }
}

export default Tree;

let bst = new BinarySearchTree();

bst.insert(9, "nine");
bst.insert(4, "four");
bst.insert(6, "six");
bst.insert(20, "twenty");
bst.insert(170, "one hundred seventy");
bst.insert(15, "fifteen");
bst.insert(1, "one");
bst.insert(2, "two");
bst.insert(3, "three");
bst.insert(5, "five");
bst.insert(7, "seven");
bst.insert(8, "eight");
bst.insert(10, "ten");
bst.insert(11, "eleven");
bst.insert(12, "twelve");
bst.insert(13, "thirteen");
bst.insert(14, "fourteen");
bst.insert(16, "sixteen");
bst.insert(17, "seventeen");


bst.remove(10);

console.log(bst.dfsInOrder())

/*[
   9, 20, 170, 15, 16, 17, 10,
  11, 12,  13, 14,  4,  6,  7,
   8,  5,   1,  2,  3
]*/
console.log(bst.isValidTree())

I’m using Laravel/Inertia/Vue3, I get the user object, and then I want to use it inside other function, but its always undefined.

<script setup>
// imports...

const props = defineProps({
    // props...
})

const user = computed(() => usePage().props.value.user);

const click = () => {
  alert(`${user.name} clicked`);
}
</script>

If I try to access the user object in the HTML vía the handlebars, it works as intended, but I can’t use it in the click function. Of course I could assign a const user inside the function with the value usePage().props... but this looks quite ugly, and there must be another way.

Of course, I’m pretty new to Vue.

EDIT #####

I’m refering to this when I say it looks ugly:

<script setup>
// imports...

const props = defineProps({
    // props...
})

const user = computed(() => usePage().props.value.user);

const click = () => {
    const user = usePage().props.value.user;
    alert(`${user.name} clicked`);
}
</script>

There must be a better and correct way

My Project:

It is a Movie-List Project. This Application serves as a movie-streaming service, the user has 4 genres to choose from. (Romance, Horror, Comedy, and Action). The genres are displayed by a clickable card component, and when clicked, are routed to their respective pages (which display the movies of their choice).

THE PROBLEM:

I am currently experiencing a routing problem. For example, if the user was to click the Romance Genre Button. The URL would showlocalhost:3000/romance. , indicating that the page has been routed.

What gets returned?

A fully functioning Navbar

All 4 of the Genre Card Components are once again returned, it seems to me they are nested on the top of the body on the home page.

The Romance.js file, (where the list of movies should be), is returned as well, however it shows up under the Genre Card-Button Components.

Is there any way I can nest the Genre Card-Button Components only on the Homescreen, and have them dissapear when I’am routed to any of the Genre pages?

I know this might sound confusing, since english is my second lanuage. If you need a better explanation, feel free to ask me in the comments.

CODE:

App.js

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import NavbarA from './components/NavbarA';
import Home from './components/Home';

function App() {
  return (
    
    <div className="App">
      
      <NavbarA/>
      <Home/>
      <div> 



            </div>
    </div>
  );
}

export default App;

Navbar.js

import React, { Component } from 'react';
import { Navbar,Nav, Container } from 'react-bootstrap';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
  } from "react-router-dom";
  import Home from './Home';
  import About from './About';

export default class NavbarA extends Component{
    render(){
        return (
            <Router>
            <div>
                <Navbar bg="dark" variant={"dark"} expand="lg">
                
  <Container>
    <Navbar.Brand href ="/home">
    <img src={process.env.PUBLIC_URL + '/spotifly.png'} alt="logo" />
    </Navbar.Brand>
<Navbar.Brand/>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="me-auto">
          
        <Nav.Link as ={Link} to = {"/home"}>Home</Nav.Link>
        <Nav.Link  as ={Link} to = {"/about"}>About</Nav.Link>
          </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>
            </div>
            <div>
            <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/about" element={<About />} />    
        </Routes>
            </div>
         </Router>

        )
    }
}
  

Home.Js

import React, { Component } from 'react';
import '../components/Home.css';
import {
    BrowserRouter as Router,
    Routes,
    Route,
  } from "react-router-dom";
  import Romance from ‘./Romance’;
  import Action from ‘./Action’;
 import Horror from ‘./Horror’;
 import Comedy from ‘./Comedy’;
import Buttons from './Buttons';

export default class Home extends Component{
   
    render(){
        return(
            <Router>
            <Buttons/>
            <Routes>
      <Route path=“/romance” element={<Romance/>} />
      <Route path=“/action” element={<Action />} />    
      <Route path=“/horror” element={<Horror />} />   
      <Route path=“/comedy” element={<Comedy />} />   
    </Routes>
        <div>
        
        </div>
        </Router>
            
        )
    }
}

Buttons.js

import React, { Component } from 'react';
import RomanceButton from './RomanceButton';
import ComedyButton from './ComedyButton';
import ActionButton from './ActionButton ';
import HorrorButton from './HorrorButton';

export default class Buttons extends Component{
  
    render(){

        return(
<div>
<RomanceButton/>  
 <ComedyButton/>        
<ActionButton/>
<HorrorButton/>


</div>
        )
    }
}

Note: All Card Components Follow the Same Structure. The only difference is their names.

Card.css

.card{
    padding: 0px;
    background-color: #121212;
    margin-bottom: 10px;
    margin: 10px;
    align-items: center,  
}

Romance.Card.js

import '../components/Card.css';

const RomanceCard = () => {
    return (
        <div class="card">
         <div class="card-body">

        <img src={process.env.PUBLIC_URL + '/romance.png'} alt="logo" />

          
        </div>
      </div>
    )
}

export default RomanceCard;

RomanceButton.js

import { Link } from 'react-router-dom';
import RomanceCard from './RomanceCard';

const RomanceButton = () => {
    return (
        <Link className='btn' to=‘/romance’>
<div>
            <RomanceCard/>
            </div>
        </Link>
    )
}

export default RomanceButton;

Romance.js

import React, { Component } from 'react';

export default class Romance extends Component{
    render(){
        return(
            <div> 
                <h1> THIS IS THE ROMANCE PAGE. HERE ARE THE LIST OF SONGS: </h1>

    {*/List of songs/*) 
                  
            </div>
        )
    }
}

What Languages Am I Using?

React, Javascript, Css

OTHER INFORMATION:

Current npm’s Installed On Package:

npx install create-react-app . 
npm install react-bootstrap
npm Install react-router-dom

All Package.json Dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "navbar": "^2.1.0",
    "react": "^18.0.0",
    "react-bootstrap": "^2.2.3",
    "react-dom": "^18.0.0",
    "react-is": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },

What Do you Think?

Thank you for your time, much appreciated!

• Zpo

Here is my 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>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script>
        var map_init = L.map('map', {
            center: [9.0820, 8.6753],
            zoom: 8
        });
        var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map_init);
        L.Control.geocoder().addTo(map_init);
        if (!navigator.geolocation) {
            console.log("Your browser doesn't support geolocation feature!")
        } else {
            setInterval(() => {
                navigator.geolocation.getCurrentPosition(getPosition)
            }, 500);
        };
        var marker, circle, lat, long, accuracy;

        function getPosition(position) {
            // console.log(position)
            lat = position.coords.latitude
            long = position.coords.longitude
            accuracy = position.coords.accuracy

            if (marker) {
                map_init.removeLayer(marker)
            }

            if (circle) {
                map_init.removeLayer(circle)
            }

            marker = L.marker([lat, long])
            circle = L.circle([lat, long], { radius: accuracy })

            var featureGroup = L.featureGroup([marker, circle]).addTo(map_init)

            map_init.fitBounds(featureGroup.getBounds())

            console.log("Your coordinate is: Lat: " + lat + " Long: " + long + " Accuracy: " + accuracy)
        }
    </script>
</body>

</html>

It shows my current position and will update when I move, however I want to draw the path taken on the map. I have not found any examples of this. Most routing plugins seem to require and endpoint to draw a path (ie: OSRM).

After drawing a path the user will be able to click “stop tracking” button and then save this path to mongodb so they can look at it later. Not sure how to do that either.

I stuck with click method in javascript. click is an asynchronous function but do not return any promise so I can not use await to solve it. The solution is to use callback but mine does not seem to work.
help me please.
Thank you.

example below.

document.getElementsByClassName("next-btn")[0].click(()=>console.log('this line should be printed after click done but it is not printed.'))

I have created and minted 1,000 images using hashlips.

However, I don’t know how to sell them on OnpenSea.

Is there any other way than manually pressing the “Sell” button one by one?

Would it be possible to use OpenSea’s Javascript SDK?

When I was solving a problem on Leetcode, I’ve defined an empty array. I tried push some numbers then I got this Errow. I don’t know why. My code here.

        // r and c are already defined numbers，arr is already defined array.
        let n = [[]]
        let index = 0
        for (let i = 0; i < r; i++) {
            for (let j = 0; j < c; j++) {
                    n[i][j] = arr[index]
                    index++;
            }
        }
        return n; 

Leetcode told me n[i][j] = arr[index] had errow；

Anyone knows why? thanks.

i am using three.js to display a .ply model, and i found a modified version of three.js’ official example webgl_loader-ply(from https://editor.p5js.org/setapolo/full/7idSig9acP). This modified version load all library and models from remote servers using url, and i can run this file in my browser without problem.

const loader = new PLYLoader();

// 'https://threejs.org/examples/models/ply/ascii/dolphins.ply'   The author uses this url to load model from a remote server
    
loader.load( 'http://127.0.0.1:8080/static/dolphins.ply', function ( geometry ) {  // I replaced his url with mine which is a local server running on my pc

    geometry.computeVertexNormals();

    const material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
    const mesh = new THREE.Mesh( geometry, material );

    mesh.position.y = - 0.2;
    mesh.position.z = 0.3;
    mesh.rotation.x = - Math.PI / 2;
    mesh.scale.multiplyScalar( 0.001 );

    mesh.castShadow = true;
    mesh.receiveShadow = true;

    scene.add( mesh );

} );

However, when i tried to replace the model with my own, nothing is displayed. i tried either a local directory path or a url to a local golang static file server, and they all failed. I am pretty sure these two dolphines.ply files are exactly the same.
I’ve seen some other question, tried to reference mesh.rotate.x or mesh.scale.multiplyscalar and didnot work.

By the way, my .ply model comes with texture, i also want to know how to disply the model’s texture, instead of create a pure color texture in the js code.
Thank you very much.

i developed an webview app for android (its a website i transform into a webview app ) so i wanted to know if its possible to print an invoice directly(silent print)to a HANDHELD POS THERMAL PRINTER with php or JavaScript…

Hope you understand what I mean

so the question is the title pls help me, I’m working on this for several days now and this shit won’t work

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="../CSS/homepage.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="../pics/logow.png">

    <meta charset="utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Google Maps JavaScript library -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyCqaoXSj1ISkOCYjiR6To8eBBJ_F2Cvsvg"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
    <title>Taxi-Discovery</title>
</head>


<body>

    <header>

    <div id="logo">

        <img src="../pics/logo.png" alt="logo">
        </div>

            <nav id="nav">

                <ul>
                    <li><a href="#Home" onclick="document.getElementById('home').scrollIntoView();">Home</a></li>

                    <li><a href="#Auftrag" onclick="document.getElementById('auftrag').scrollIntoView();">Auftrag</a></li>

                    <li><a href="#Über Mich" onclick="document.getElementById('überMich').scrollIntoView();">Über Mich</a></li>

                </ul>
            </nav>
        
    </header>
    <section id="home">
        <hr>
        <h1>Taxi-Discovery</h1>

        <p>Sie brauchen ein Taxi? Kein problem! Geben sie jtzt einen Auftrag auf</p> <br>

        <button type="submit" onclick="document.getElementById('auftrag').scrollIntoView();">Auftrag aufgeben</a></button>
    </section>

    <section id="auftrag">
        <hr>
        <h3>Auftrag</h3>
    
        <button type="button" class="toggle-btn" class="inputText" onclick="show1()">Hin</button>
        <button type="button" class="toggle-btn" class="inputText" onclick="show2()" >Hin & zurück</button><br>



        
<div>       

<div id="div1">
        <form method="post" >


    <select name="Personen" class="inputText" id="option" required>
        <option disabled="" selected="true" value="">Wie viele Personen?</option>
        <option>1 Person</option>
        <option>2 Personen</option>
        <option>3 Personen</option>
        <option>4 Personen</option> 

    </select> <br>

        

        
        <input type="name" required="" class="inputText" id="name" name="name" placeholder="Name"> <br> 

        <input type="text" required="" class="inputText" id="search_input"  name="o" placeholder="Abholort"> <br> 

        <input type="text" required=""   class="inputText" id="search_inputzwei" name="d" placeholder="Wunschort"><br>

        <input type="text" name="book" required="" id="datum" class="inputText" placeholder="Datum" onfocus="(this.type='datetime-local')"><br>

        <input type="text" name="" placeholder="Flug-Nr (optional)" class="inputText">

        <textarea name="wünsche" placeholder="Wünsche?" maxlength="100" id="wünsche"></textarea><br>
    

            
        <input type="submit" class="submit" name="submit" placeholder="senden"><br>
        </form>

        </div>








        <div id="div2">
        <form >


    <select name="Personen" class="inputText" id="option" required>
        <option disabled="" selected="true" value="">Wie viele Personen?</option>
        <option>1 Person</option>
        <option>2 Personen</option>
        <option>3 Personen</option>
        <option>4 Personen</option> 

    </select> <br>

        

        
        <input type="name" required="" class="inputText" id="name" name="name" placeholder="Name"> <br> 

        <input type="text" required="" class="inputText" id="search_inputdemo" placeholder="Abholort"> <br> 

        <input type="text" required=""   class="inputText" id="search_inputzweidemo" placeholder="Wunschort"><br>

        <input type="text" name="book" required="" id="datum" class="inputText" placeholder="Hin-Datum" onfocus="(this.type='datetime-local')"><br>

        <input type="text" name="book" required="" id="datum" class="inputText" placeholder="Zurück-Datum" onfocus="(this.type='datetime-local')"><br>

        <input type="text" name="" placeholder="Flug-Nr (optional)" class="inputText">

        <textarea name="wünsche" placeholder="Wünsche?" maxlength="100" id="wünsche"></textarea><br>
    
        <input type="submit" class="submit" name="submit" placeholder="senden"><br>
        </form>

        </div>


        <p>Sie wollen den Preis erfahren?</p>

        <input type="text" name="km" id="km" placeholder="geben sie die Kilometer ein" class="inputText"><br>

        <input type="text" name="preis" readonly="" class="inputText" id="preis" placeholder="preis"><br>

        <button id="preisA" onclick="getRoute()" class="toggle-btn">Preis ausrechnen!</button>
        

        </div>





        

    </section>

    <section id="überMich">
        <hr>
        <h3>Über Mich</h3>


        <p>Ich bin der Discovery Sport Taxifahrer Recep Ipek. Meine Firma wurde 2013 neugegründet und seitdem verrichte ich meine Arbeit in Innsbruck. Meine Ziele sind vor allem Pünktlichkeit und Zufriedenheit der Kunden!</p>

        <div>
            
            <img src="../pics/1.png" class="bilder" height="200px" width="auto">

            <img src="../pics/2.png" class="bilder" height="200px" height="200px" width="auto">

            <img src="../pics/3.png" class="bilder" height="200px" height="200px" width="auto">


        </div>
    </section>

    <footer>
        
        <p>&copy; 2013-2022 Taxi Discovery!</p>
    </footer>



    <script>





        function show1() {
            document.getElementById('div1').style.display = "block";
            document.getElementById('div2').style.display = "none";

        }

        function show2() {
            document.getElementById('div2').style.display = "block";
            document.getElementById('div1').style.display = "none";
        }
    

    var today = new Date().toISOString().slice(0, 16);

    document.getElementsByName("book")[0].min = today

    document.getElementsByName("book")[1].min = today

    document.getElementsByName("book")[2].min = today

    


var autocomplete1 = new google.maps.places.Autocomplete(document.getElementById("search_input"), 
{
    componentRestrictions: {'country' : ['AT']},
    fields: ['geometry', 'name'],
    types: ['establishment', 'geocode']
})

var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById("search_inputzwei"), 
{
    componentRestrictions: {'country' : ['AT']},
    fields: ['geometry', 'name'],
    types: ['establishment', 'geocode']
})

var autocomplete = new google.maps.places.Autocomplete(document.getElementById("search_inputdemo"), 
{
    componentRestrictions: {'country' : ['AT']},
    fields: ['geometry', 'name'],
    types: ['establishment', 'geocode']
})

var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById("search_inputzweidemo"), 
{
    componentRestrictions: {'country' : ['AT']},
    fields: ['geometry', 'name'],
    types: ['establishment', 'geocode']
})




var directionsService = new google.maps.DirectionsService();


var request = {

  origin      : document.getElementById('search_input').value, // a city, full address, landmark etc
  destination : document.getElementById('search_inputzwei').value,
  travelMode  : google.maps.DirectionsTravelMode.DRIVING
};  

function getRoute(){
    directionsService.route(request, function(response, status) {
  if ( status == google.maps.DirectionsStatus.OK ) {


document.getElementById('preis').value = Math.round(response.routes[0].legs[0].distance.value / 1000 * 2) // the distance in metres
  }
  else {
    // oops, there's no route between these two locations
    // every time this happens, a kitten dies
    // so please, ensure your address is formatted properly
  }
});

}





document.getElementById('km').value * 1,9

function preis() {
    if (document.getElementById('km').value.includes(",")) {
        var x = document.getElementById('km').value

        x = x.replace(/,/g, '.')

        document.getElementById('preis').value = x * 1.9 + "€"



    }
    else {
    document.getElementById('preis').value=document.getElementById('km').value * 1.9 + "€"
    }

    
}





</script>



</body>


</html>

so there is my whole html code so you won’t miss something, and i know it’s messy but i never worked with javascript before so it’s like my first time. I want to get the value of the fields search_input and search_inputzwei which are autocomplete fields.