TypeError: advance.randomID is not a function

heres the code of my main file (index.js)

require("./start")
const Discord = require('discord.js')
const client = new Discord.Client()

client.on('message', message => {
function sendmsg(message) {
    message.channel.send(message)
}

});

function randomID() {
  // Returns a random ID
  char = 'J97DS97+_$}{cx:{$#}A+C}$|{%A$}EraAE{RX@@@2{@}{%}G@{#QB}&V{%}C{VYS}#"^EA}'
  char[Math.floor(Math.random() * char.length)];
}

and heres my code of start.js file

const Discord = require('discord.js')
const client = new Discord.Client()
const advance = require('./index.js')
client.on('message', message => {
if(message.content == '&randomId' {
message.channel.send(advance.randomID())
}
});

now i what wanna do is to send a random id from a string called char
so i want to run a function from a file called index.js
but it says TypeError: advance.randomID is not a function
can you please help me Thanks in advance!

The input field and navigation bar are non responsive. what did I do wrong?

Full Code Here: https://github.com/akashpandya/Portfolio

@media (max-width: 700px) {
  .nav-links {
    position: absolute;
    background: #f44336;
    height: 100vh;
    width: 200px;
    top: 0;
    right: 0;
    z-index: 2;
    text-align: left;
    transition: 1s;
}

This is the script to toggle mobile navbar but when i switch to mobile view it is on by default outside of the perameters of the website and I have to turn it off and then on.

<script>
      var navlinks = document.getElementById("navLinks");
      function showMenu() {
        navlinks.style.right = "0";
      }
      function hideMenu() {
        navlinks.style.right = "-200px";
      }
    </script>

This form input was too long on mobile but the fix I found makes it look terrible

 <form>
            <input type="text" class="grid-item" placeholder="Name:" id="name" />
            <input type="Email" class="grid-item" placeholder="Email:" id="email" />
            <input type="number" class="grid-item" placeholder="Phone Number:" id="phone" />
            <label for="textarea">Your Message Here:</label>
            <textarea type="text" class="grid-item" id="msg"> </textarea>
</form>

CSS Styling for Form

.contact {
  width: 60%;
  margin: auto;
  text-align: center;
  margin-top: 150px;
  border: 1px solid #f44336;
  border-radius: 10px;
}

form {
  display: grid;
  grid-template-columns: repeat(auto-fit, (2, 1fr));
}
.grid-item {
  background-color: #fff3f3;
  text-align: center;
  margin: 10px 35px;
  border: #fff3f3;
  padding: 10px;
}
#phone,
#msg,
#btn {
  grid-column: span 2;
}
#btn {
  margin: 10px auto;
  padding: 2px 20px;
  border: 1px solid #f44336;
  background: #fff;
  border-radius: 4px;
  transition: 0.5s;
  cursor: pointer;
}
#btn:hover {
  background: #f44336;
}
label {
  text-align: start;
  margin: 0 30px;
  color: #777;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  padding-top: 20px;
}
::placeholder {
  color: #777;
  font-size: 14px;
}

How do i put my gallery slider to be below the gallery section?

I’m trying to put my gallery slider to be below the title GALLERY. How should I fix the positioning of the container so that it is centred and at the same time responsive?

Also, the fifth image doesn’t seem to be working. Is there something wrong with the javascript total slides? it works with 4 images but I’m trying to do 5 images in total.

let i = 0; // current slide
let j = 5; // total slides

const dots = document.querySelectorAll(".dot-container button");
const images = document.querySelectorAll(".image-container img");

function next(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = ( j + i + 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator( i+ 1 );
}

function prev(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = (j + i - 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator(i+1);
}

function indicator(num){
    dots.forEach(function(dot){
        dot.style.backgroundColor = "transparent";
    });
    document.querySelector(".dot-container button:nth-child(" + num + ")").style.backgroundColor = "#8052ec";
}

function dot(index){
    images.forEach(function(image){
        image.classList.remove("active");
    });
    document.getElementById("content" + index).classList.add("active");
    i = index - 1;
    indicator(index);
}
/* image slider */
.container{
  background-color: #ffffff;
  width: 45%;
  min-width: 520px;
  transform: translate(-50%,-50%);
  border-radius: 5px;
  padding: 20px;
}
.image-container{
  position: relative;
  width: 100%;
}
.imgg{
  position: relative;
  width: 100%;
  display: none;
}
.active{
  display: block;
}
.dot-container{
  width: 150px;
  margin: 20px auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
button{
  outline: none;
  cursor: pointer;
}
.dot-container button{
  height: 13px;
  width: 13px;
  border-radius: 50%;
  border: 3px solid #8052ec;
  background-color: transparent;
}
.dot-container button:nth-child(1){
  background-color: #8052ec;
}
#prev,#next{
  height: 40px;
  width: 40px;
  position: absolute;
  background-color: #8052ec;
  color: #ffffff;
  margin: auto;
  top: 0;
  bottom: 0;
  border: none;
  border-radius: 3px;
  font-size: 18px;
  font-weight: bolder;
}
#prev{
  left: 15px;
}
#next{
  right: 15px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>NUS Giving Run BIG 2021</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- Custom Css -->
    <link rel="stylesheet" href="css/styles.css" />
    <!-- Favicon -->
    <link rel="icon" href="favicon.ico">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
        rel="stylesheet" />
</head>

<body id="page1">
    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark navbar">
        <div class="container-fluid">
            <a class="navbar-brand" href="index.html">
                <img src="images/org_logo.png" alt="logo" width="50" height="44">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
                aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="RaceInfo.html">Race Information</a></li>
                    <li class="nav-item"><a class="nav-link" href="FAQ.html">FAQ</a></li>
                    <li class="nav-item"><a class="nav-link" href="ContactUs.html">Contact Us</a></li>
                </ul>
                <span class="navbar-text ">
                    <a class="btn btn-outline-success me-2 fas fa-sign-in-alt" href="register.html" role="button">
                        Register</a>
                    <a class="btn btn-sm btn-outline-secondary far fa-user" href="MyAcct.html" role="button"> Login</a>
                </span>
            </div>
        </div>
    </nav>
    <!-- Key Visual -->
    <div>
        <img src="images/KV.jpg" alt="KV" class="KV">
    </div>
    <!-- About Us -->
    <div class="About">
        <h1>ABOUT US</h1>
        <hr class='hmpg'>
        <p class="Home">As a global leader in university philanthropy, NUS Giving is delivering sustainable impact and
            realising
            possibilities.
        </p>
        <p class="Home"> We build enduring relationships with our donors to seed and grow transformational opportunities
            that
            create
            a ripple effect of progress through our communities and the world, transforming lives and empowering
            change.<br>
            We are future-making as we empower students to achieve their fullest potential, give future leaders
            and
            changemakers the opportunity to learn from the best through world-class academic and research
            programmes,
            and enable the foremost minds of today to solve the problems of tomorrow through innovative
            research.
        </p>
        <hr>
    </div>
    <div class="container-fluid feature-section">
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-6">
                <img class="featureimg img-fluid" src="images/runfuture.jpg" alt="runimg">
            </div>
            <div class="col-sm-12 col-md-6 col-lg-6">
                <h2>NUS RUN BIG</h2>
                <hr class="hmpg">
                <p class="Home">NUS GIVING RUN BIG is held annually to celebrate and recognise everyday heroes who
                    have made a positive impact in the lives of others.<br><br>Come Run BIG with us by taking your pick
                    from the various challenges and start clocking in those clicks. We have also included the best
                    running trails in the mix!
                </p>
            </div>
        </div>
    </div>
    <hr>
    <h2>GALLERY</h2>
    <div class="container">
        <div class="image-container">
            <img src="images/G1.jpg" id="content1" class="active imgg">
            <img src="images/G2.jpg" id="content2" class="imgg">
            <img src="images/G3.jpg" id="content3" class="imgg">
            <img src="images/G4.jpg" id="content4" class="imgg">
            <img src="images/G5.jpg" id="content4" class="imgg">
        </div>
        <div class="dot-container">
            <button onclick="dot(1)"></button>
            <button onclick="dot(2)"></button>
            <button onclick="dot(3)"></button>
            <button onclick="dot(4)"></button>
            <button onclick="dot(5)"></button>
        </div>
        <button id="prev" onclick="prev()"> &lt; </button>
        <button id="next" onclick="next()"> &gt; </button>
    </div>
  
    <hr>
    <div class="footer-basic">
        <footer>
            <div class="social">
                <a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram social-icons"></i></a>
                <a href="mailto:contactus@nusrunbig.com" target="_blank"><i
                        class="fas fa-envelope social-icons"></i></a>
                <a href="https://twitter.com/?lang=en" target="_blank"><i class="fab fa-twitter social-icons"></i></a>
                <a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook social-icons"></i></a>
            </div>
            <ul class="list-inline">
                <li class="list-inline-item"><a href="#">Terms and Conditions</a></li>
                <li class="list-inline-item"><a href="#">Privacy Policy</a></li>
            </ul>
            <p class="copyright">NUS Giving Run Big © 2009</p>
        </footer>
    </div>
    <!-- Javascript -->
    <script src="script.js"></script>
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/e3904b02e6.js" crossorigin="anonymous"></script>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

</body>

</html>

How to add remove dynamic form based on some condition

I want to add dynamic formarray based on api response.Below are the condition for pushing the form

In Below response, It will check for key otherDetails, and if otherDetails array key is present,
check the length of otherDetails array, and check for processTechType.

For ex – In below response, Length of First otherDetails array is 2 becuase First otherDetails array contain 2 objects, and it contain processTechType Continuous and Batch, So it will call addContinuous for processTechType Continuous and addBatch push function for processTechType Batch .

For ex – In Below response, Length of second otherDetails array contain 1 objects, and it contain processTechType Batch, So it will call addBatch push function likewise.

Can anyone please help me prepare this logic based on response.

I am getting below response array of object from API.

const myObj = [
      {
        'makeLineName': 'Test1',
        'otherDetails': [
          {
            'processTechType': 'Continuous'           
          },
          {
            'processTechType': 'Batch',            
          }
        ]
      },
      {
        'makeLineName': 'Test2',
        'otherDetails': [
          {
            'processTechType': 'Batch'            
          }          
        ]
      }
    ];

Below is my code

addContinuous() {
    this.continuousType().push(this.createContinuousForm());      
  }  
  addBatch() {   
    this.batchType().push(this.createBatchForm());  
  }  

getData() {    
        this.makeLineData = resp; // Here i am getting the object.
         console.log(this.makeLineData, "this.makeLineData");
     
  }

Webshare API Javascipt: Preview shared image

I have the following Codepen: https://codepen.io/Jsbbvk/pen/vYeRBZy

const onClick = async () => {
  const blob = await (await fetch("https://source.unsplash.com/random")).blob()
  const file = new File([blob], 'img', {type: blob.type})
  navigator.share({title: 'image', text: 'image', files: [file]})
}

document.getElementById("share").addEventListener("click", onClick)

On mobile, this is what it looks like when you press the button image sharing

There is no preview of the image before sharing it. Below is the intended result (which was achieved by long-pressing a random image and pressing “share”) intended
Is there a way to achieve this image preview?

Five day forecast for loop not returning data

I’ve been working on a project that requires me to get a five day forecast, but when I try to get the for loop to return the five day value, it’s only returning the information for the last day five times. This is the code I have:

function displayWeatherFiveDay(weather) {
    for (var i = 0; i < weather.length; i++) {
        var fiveDayTemp = weather[i].temp.day;
        var fiveDayHumid = weather[i].humidity;

        console.log(fiveDayTemp, fiveDayHumid);

        for (var q = 0; q < 5; q++) {
            document.getElementById("img" + (q + 1)).src = "http://openweathermap.org/img/wn/" +
                weather[i].weather[0].icon
                + ".png";
            document.getElementById("daytemp" + (q + 1)).innerHTML = "Temp: " + Number(fiveDayTemp).toFixed(1) + "°";
            document.getElementById("dayhumid" + (q + 1)).innerHTML = "Humidity: " + Number(fiveDayHumid).toFixed(1);
        }

    }
}

Is it because I have a second for loop nested in there? I’m not sure why that would only return the last item in the array though. Any feedback will help, thanks!

Is it possible to set content into TinyMCE editor without using javascript? I am new to Angular, dont know much JS so I’m not sure

.html of the tinymce component

 <editor
 apiKey = "2di8j6pg7a9um1bq6sjoma8vov8b0g7gzxn06d4zfw1lskrv"
        [init]="init"
        [(ngModel)]="message"
        (ngModelChange)="onChangeNote()"></editor>

.ts of the tinymce component

import { StringMapWithRename } from '@angular/compiler/src/compiler_facade_interface';
import { Component, OnInit } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';
import { FormControl,FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Subscription } from 'rxjs';
import tinymce from 'tinymce';
import { DataServiceService } from '../data-service.service';


@Component({
  selector: 'app-tinymce',
  templateUrl: './tinymce.component.html',
  styleUrls: ['./tinymce.component.css']
})
export class TinymceComponent implements OnInit {
  @Output() newItemEvent = new EventEmitter<string>();
message!:string;
message2!:string;
subscription!: Subscription;
constructor(private data: DataServiceService){}
  init={
    height: 300,
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table paste code help wordcount'
     ],
    menubar: false,
    toolbar: 'undo redo | formatselect | fontselect | fontsizeselect |'+
    '| bold italic backcolor | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent |' +
    'removeformat | link image media |',
    font_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace',
    
  };

  ngOnInit(): void {
    this.subscription = this.data.currentTemplate.subscribe(message2 =>{ this.message2 = message2;}
    );
console.log("message 2 is" ,this.message2);
  }

  onChangeNote()
  {
    //console.log("message 2 in editor is" ,this.message2);
    console.log(this.message);
    this.newItemEvent.emit(this.message)
  }

}

from what i’ve researched, I will need to use javascript code to use the setContent() function and for that I will need to change the way I initialize the editor.
Can someone confirm? I want to be sure before I change up my code.

Auto populate Dropdown

The issue is when I select a department its shows users names in a single line with a coma I want to show users in the dropdown like when user select department and designation then user show in dropdown I have 3 table departments, designation and users, department and designation are foreign key in users

 ```  department dropdown  ```
                                    <label>User Department</label>
                                    <select onchange="changeDep();" name="fwd_department" id="dep_id" required="" class="form-control department_name " style="width: 100%;">
                                        <option value="0" selected="true" disabled="true">Select Department</option>
                                        @foreach($department as $dep)
                                        <option value="{{ $dep->id }}" >{{ $dep->name }}</option>
                                        @endforeach
                                    </select>
  ```   designation dropdown    ```     
                            
                                    <label>User Designation</label>
                                    <select onchange="changeDesi();" name="fwd_designation" id="desi_id" required="" class="form-control department_name " style="width: 100%;">
                                        <option value="0" selected="true" disabled="true">Select Department</option>
                                        @foreach($designation as $desi)
                                        <option value="{{ $desi->id }}" >{{ $desi->name }}</option>
                                        @endforeach
                                    </select>
 ```    users dropdown    ```                               
                                    <label>User Name</label>
                                    <select name="name"  required="" class="form-control department_name " style="width: 100%;">
                                        <option value="0" id="us_id" selected="" disabled="">Select user</option>    
                                    </select>
       ```      Java Script code ```
                 <script>
                    var selectedValue="";
                    var selectedValue2="";
                    var arr = @json($user);
                    function changeDep() {
                        var selectBox = document.getElementById("dep_id");
                        selectedValue = selectBox.options[selectBox.selectedIndex].value;
                 
                        if(selectedValue2){
                            filterData = arr.filter(f => f.designation_id == selectedValue2 && 
                            f.department_id == selectedValue)
                        }else{
                            filterData = arr.filter(f => f.department_id == selectedValue)
                        }
                
                        let arrPush = [];
                        filterData.map(m => {
                            arrPush.push(m.name)
                            return m;
                        })
                        document.getElementById("us_id").innerHTML = arrPush;
                    }
                
                    function changeDesi() {
                        var selectBox = document.getElementById("desi_id");
                        var selectedValue2 = selectBox.options[selectBox.selectedIndex].value;
                        if(selectedValue){
                            filterData = arr.filter(f => f.designation_id == selectedValue2 && 
                            f.department_id == selectedValue)
                        }else{
                            filterData = arr.filter(f => f.designation_id == selectedValue2 )
                        }
                        let arrPush = [];
                        filterData.map(m => {
                            arrPush.push(m.name)
                            return m;
                        })
                        document.getElementById("us_id").innerHTML = arrPush;
                    }
                    </script>
        
        [disply page][1]
        
          [1]: https://i.stack.imgur.com/V2sKF.png

 ```I have no idea how to DO THIS Thanks in advance ```

TypeError: Cannot read properties of undefined (reading ‘transformFile’)

React native fail to install

Version install on windows os

Node js version v17.3.0

react-native-cli: 2.0.1

react-native: 0.66.4

info Reloading app…
BUNDLE ./index.js
error: TypeError: Cannot read properties of undefined (reading
‘transformFile’) at
Bundler.transformFile
(B:workAreactreact-native-basesamplenode_modulesmetrosrcBundler.js:48:30)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Object.transform
(B:workAreactreact-native-basesamplenode_modulesmetrosrclibtransformHelpers.js:101:12)
at async processModule
(B:workAreactreact-native-basesamplenode_modulesmetrosrcDeltaBundlertraverseDependencies.js:137:18)
at async traverseDependenciesForSingleFile
(B:workAreactreact-native-basesamplenode_modulesmetrosrcDeltaBundlertraverseDependencies.js:131:3)
at async Promise.all (index 0)
at async initialTraverseDependencies
(B:workAreactreact-native-basesamplenode_modulesmetrosrcDeltaBundlertraverseDependencies.js:114:3)
at async DeltaCalculator._getChangedDependencies
(B:workAreactreact-native-basesamplenode_modulesmetrosrcDeltaBundlerDeltaCalculator.js:164:25)
at async DeltaCalculator.getDelta
(B:workAreactreact-native-basesamplenode_modulesmetrosrcDeltaBundlerDeltaCalculator.js:94:16)
at a
babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'transform-inline-environment-variables',
      {
        include: ['IS_REACT_NATIVE'],
      },
    ],
  ],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

metro.config.js

module.exports = {   transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),   }, };

One extra radio button is getting printed in div in JQUERY

I’m trying to copy one row of a table and append a radio button to it. There are 3 rows that i declared in the html and an add button in jquery which can add names to the table. All of these rows are appended with a delete button. when I click the start button I want the names to go to the next div without the delete button and append a radio button to it. and the user should be able to vote the names.when i add names, an extra radio button without name value is passed to the div. I can’t figure out why. I’m trying to make a voting system using jquery without using any databases(temporary). Please help. I can’t figure out why the extra radio button is getting passed. It’s only passed when i add candidate using the add button.

here’s my code:

$(document).ready(function()
{
    $('#start').click(function()
    { 
        $("#div1").hide();
        $("#buttonset1").hide();
        $("#div2").show();
        $("#voterName").val("")
        if( $('#candidateTable thead tr').children().length = 1)
        {
            if( $('#newTable thead').children().length == 0 )
            {
                $('#newTable thead').append('<tr></tr>');
            }
            $('#newTable thead tr').append('<th>' + $($('#candidateTable thead tr').children()).text() + '</th>');
            $('#candidateTable tbody tr').each(function(i)
            {
                if( $('#newTable tbody').children().length != $('#candidateTable tbody').children().length)
                {
                    $('#newTable tbody').append('<tr></tr>');
                }
                $('#newTable tbody tr:nth-child(' + (i + 1) + ')').append('<td>' + $($(this).children()[0]).text()+'</td>'+'<td><input type="radio" class="radiobutton"></td>');
            });
        }

    });

    //delete candiates

    $("#candidateTable").on('click', '.del', function()
    {
        $(this).closest('tr').remove();
    });

    //add candidate

    $("#add").click(function()
    {
    //adding candidates
    
        var candidatename = $("#candidatename").val();
        if(candidatename.length!=0)
        {
            $("#candidateTable tbody").append('<tr><td>'+ candidatename +'</td>'+'<td>'+'<button class="del" id="Delete">Delete</button>'+'</td><tr>');
            $("#candidatename").val('');
        }
    });
});

$(document).ready(function()
{
    $("#final").click(function(){
    $("#div2").hide();
    $("#div4").show();
    });
});
table, tr, th, td{
  border: 1px solid #000;
}
<h1> Voting System </h1>
<body>
    <div id="div1">
        <table id="candidateTable">
            <thead>
                <tr>
                <th id="candidatelist">Candidate Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>XXXX</td>
                    <td><button class="del" id="Delete">Delete</button></td>
                </tr>
                <tr>
                    <td>YYYY</td>
                    <td><button class="del" id="Delete">Delete</button></td>
                </tr>
                <tr>
                    <td>ZZZZ</td>
                    <td><button class="del" id="Delete">Delete</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="buttonset1">
        <br>
        <br>
            <input type="text" id="candidatename"> 
            <button id="add">Add</button>
        <br>
        <br>
            <button id="start">Start</button>
        <br>
        <br>        
    </div>
    <br>
    <form action="javascript:void(0)">
    <div id="div2" style="display: none;">
        <div id="buttonset2">
        <label>Name</label>
        <input type="text" name="Name" id="votername">
        <button id="vote">Vote</button>
        <br>
        <br>

        <table id="newTable">
        <thead>
        </thead>
        <tbody>
            <tr>

            </tr>
        </tbody>
        </table>
    </form>
        <br>
        <br>
        <button id="final">Submit Votes</button>
        </div>
    </div>

    <br>
    <br>
    <br>
    <div id="div4" style="display:none;">
        <h2>
            Result
        </h2>
    </div>

</body>
</html>

can’t remove google map markers in vue, the setMap is not work

I’m using google API to display a map, markers, and polygons.
The problem is when I want to add a new marker, the previous markers are not gone.

I save the map, markers & polygons inside my data state

data() {
    return {
    google: window.google,
    map: null,
    activeInfoWindow: null,
    polygons: [],
    markers: []
    }
},

I have already tried to remove the previous markers with marker.setMap(null) before showing new markers

filtersResults: function (filterResults) {
    // REMOVE PREVIOUS ACTIVE MARKER
    this.markers.map((marker) => marker.setMap(null))
},

I tried to empty the markers array too. but nothing happens, the markers still show on the map
enter image description here
enter image description here

the setMap is not undefined, this is the result when I’m console.log(marker.setMap)

ƒ (c){try{this.set(a,b(c))}catch(d){_.Pe(_.Oe("set"+_.Bf(a),d))}}
  data() {
      return {
        google: window.google,
        map: null,
        activeInfoWindow: null,
        polygons: [],
        markers: []
      }
    },
    async mounted() {
      const { LatLng, Map, MapTypeId } = this.google.maps
        this.map = new Map(document.getElementById('map'), {
            zoom: 10,
            center: new LatLng(process.env.INITIAL_LAT, process.env.INITIAL_LNG),
            mapTypeId: MapTypeId.ROADMAP
        })
    },
    watch: {
      filtersResults: function (filterResults) {
        // REMOVE PREVIOUS ACTIVE MARKER
        this.markers.map((marker) => marker.setMap(null))
        this.markers = []
      },
      assets: {
        handler: function (newValue) {
          const { map } = this
          if (isNotNullAndUndefined(newValue) && map) {
            
            // ! GENERATE MARKER IN HERE
            this.markers = newValue.map((value) => {
              const { location } = value
              return this.generateMarkers({
                latitude: dotFormat(location.lat),
                longitude: dotFormat(location.lng),
                details: value
              })
            })
          }
        },
        immediate: true
      }
    },
    methods: {
      generateMarkers({ latitude, longitude, details }) {
        const { map, google } = this
        const { LatLng, Marker } = google.maps

        const marker = new Marker({
          position: new LatLng(latitude, longitude),
          draggable: false
        })

        marker.setMap(map)
        return marker
      },
    }
  }

Anyone knows about this issue & how to fix it?
I really appreciate it if you do some comments

thanks, btw happy new year

I need to display this data to the table after searching can anyone have idea how to create it and thanks for helping

**I need to display this data to the table after searching can anyone have idea how to create it and thanks for helping

$("#search-name").keyup(function () {
            let nameKeyword = $("#search-name").val();
            employeeRef
                .orderBy("name", "asc")
                .startAt(nameKeyword).endAt(nameKeyword + "uf8ff")
                .get()
                .then((querySnapshot) => {
                    querySnapshot.forEach((doc) => {
                        console.log(doc.id, ' => ', doc.data());
                    });
                })
        });

i get the result in console correctly so , i want to appear it in
the table as shown in the image

**also, i try: but it failed**
 $("#search-name").keyup(function () {
            $('#employee-table tbody').html('');
            let nameKeyword = $("#search-name").val();
            employeeRef
                .orderBy('name', 'asc')
                .startAt(nameKeyword)
                .endAt(nameKeyword + "uf8ff")
                .get()
                .then(function (documentSnapshots) {
                    documentSnapshots
                        .docs
                        .forEach(doc => {
                            renderEmployee(doc);
                        });
                });
        });
    
image link [https://stackoverflow.com/questions/70538869/i-need-to-display-this-data-to-the-table-after-searching-can-anyone-have-idea-ho][1]

If you want to write a text to speech app for your own language and voice from groundup, which line would you like to choose? [closed]

I want to develop text-to-speech software for my own language and voice, nothing special. Where should I start? I am from a web dev background.
give me some suggestions, articles,s or links, that I could research.

CRITERIA.
I want to use my language: Hindi
I want to use my voice too.
A offline app, kinda like “balaboka” t2e app.
Thank you…

detect finger touch javascript canvas

I have this:

<canvas id="canvas" width="400" height="400" style="border:2px solid; background-color: #2c2c2c;"></canvas>
              <input type="button" value="Clear" class="canvas-clear" />
              <button onclick="toDataUrlForCanvas()">Submit</button>
          <script>
            $(document).ready(function() {
            var flag, dot_flag = false,
              prevX, prevY, currX, currY = 0,
              color = 'black', thickness = 2;
            var $canvas = $('#canvas');
            var ctx = $canvas[0].getContext('2d');
          
            $canvas.on('mousemove mousedown mouseup mouseout', function(e) {
              prevX = currX;
              prevY = currY;
              currX = e.clientX - $canvas.offset().left;
              currY = e.clientY - $canvas.offset().top;
              if (e.type == 'mousedown') {
                flag = true;
              }
              if (e.type == 'mouseup' || e.type == 'mouseout') {
                flag = false;
              }
              if (e.type == 'mousemove') {
                if (flag) {
                  ctx.beginPath();
                  ctx.moveTo(prevX, prevY);
                  ctx.lineTo(currX, currY);
                  ctx.strokeStyle = color;
                  ctx.lineWidth = thickness;
                  ctx.stroke();
                  ctx.closePath();
                }
              }
            });
          
            $('.canvas-clear').on('click', function(e) {
              c_width = $canvas.width();
              c_height = $canvas.height();
              ctx.clearRect(0, 0, c_width, c_height);
              $('#canvasimg').hide();
            });
          });
          
          function toDataUrlForCanvas() {
            var imgData = document.getElementById('canvas')
            imgData = imgData.toDataURL(); 
            console.log(imgData)
          }
          </script>

and right now it detects the mouse being pushed down, but when I use it on mobile, it doesn’t work because it doesn’t detect my finger on the canvas. I have tried to find some solutions online but nothing for this case. How can i fix this?