javascript – Page 6907 – Blancer.com Tutorials and projects

Add new field to collection page I would like to add a new field here in Collection page in the admin dashboard how can i make it?

I want it to be stable i mean each new collection will have the same new field here but the content of the field is changed of course for example like uploading a picture and calling it in codes the calling code is easy but how to make the field is what i would like to know ?enter code here

how do i open modal with javascript. without using jquery

How do I make a modal visible with javascript? I don’t want to do it using jquery. i just want it with javascript. And I don’t want it to open when I click a button. I want it to be opened as a result of some operations in javascript. I made it with modal bootstrap. my codes are below.

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">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div class="modal fade" tabindex="-1" id="sonucModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Test Durumu</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p id="durum"></p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Çıkış</button>
              <button type="button" class="btn btn-primary">2. Aşamaya Geç</button>
            </div>
          </div>
        </div>
      </div>
    <div class="container" style="height: 100vh;">
        <div class="row" style="height: 100vh;">
            <div class="col-md-12 d-flex justify-content-center" style="height: 400px;">
                <div class="card" style="width: 25rem; margin-top:20vh; ">
                    <div class="card-body" style="text-align: center;">
                        <h5 class="card-title text-primary">Soru</h5>
                        <span class="text-black-50 fs-5" id="soru"></span>
                        <input class="w-100 form-control mt-4" type="text" id="cevap"/>
                        <button class="btn btn-outline-primary mt-4 w-100" id="ok">Tamam</button>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li id="anaCan" class="list-group-item fw-bold">Kalan Can: <span id="can"></span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
        
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

javascript code:

var turkceCumleler = [
    "Merhaba",
    "İyi Sabahlar",
    "İyi Günler",
    "İyi Akşamlar",
    "İyi Geceler",
    "Tekrar Görüşmek Üzere(Yüz yüze)",
    "Tekrar Görüşmek Üzere(Tel.)",
    "Yakında Görüşürüz",
    "Güle Güle"
    ];
var almancaCumleler = [
    "hallo",
    "guten morgen",
    "guten tag",
    "guten abend",
    "gute nacht",
    "auf wiedersehen",
    "auf wiederhögen",
    "bis bald",
    "tschüss"
]

var sayilar = [];
var healt = 3;

const getQuestion = () =>{

    document.getElementById('can').textContent=healt;
    
    let rastgele = Math.floor(Math.random()*turkceCumleler.length);
  
    if(sayilar.indexOf(rastgele) === -1){
        sayilar.push(rastgele)
        document.getElementById('soru').textContent = turkceCumleler[rastgele];
        document.getElementById('cevap').value = ""
    }else{
        getQuestion();
    }

    if(sayilar.length === turkceCumleler.length){
        //here i want modal to open
    }
       
}

const compareQuestionAnswer = () =>{
    
    if(document.getElementById('cevap').value === ''){
        alert("boş geçilemez")
    }else{
        let deger = almancaCumleler.indexOf(document.getElementById('cevap').value.toLowerCase());
        
        if(deger === -1){
            healt--;
            document.getElementById('can').textContent=healt;
            if(healt === 0){
                document.getElementById('anaCan').style.color='red';
                document.getElementById('ok').disabled = true;
            }
        }else{
            let deger1 = turkceCumleler.indexOf(document.getElementById('soru').textContent);
            
            if(deger === deger1){
                getQuestion();
            }else{
                healt--;
                document.getElementById('can').textContent=healt;
                if(healt === 0){
                    document.getElementById('anaCan').style.color='red';
                    document.getElementById('ok').disabled = true;
                }
            }
        }
    }
    
}

window.onload = getQuestion;
document.getElementById('ok').addEventListener('click',compareQuestionAnswer);
document.getElementById('anaCan').style.color='green';

Monaco Editor | How to properly use Hover’s IMarkdownString with HTML

monaco.languages.register({ id: 'mySpecialLanguage' });

monaco.languages.registerHoverProvider('mySpecialLanguage', {
    provideHover: function (model, position) {
        return {
            range: new monaco.Range(
                1,
                1,
                model.getLineCount(),
                model.getLineMaxColumn(model.getLineCount())
            ),
            contents: [
                {
                    supportHtml: true,
                    value: '<div style="color red; class="test">yes</div>'
                }
            ]
        };
    }
});

monaco.editor.create(document.getElementById('container'), {
    value: 'nnHover over this text',
    language: 'mySpecialLanguage'
});

I’m trying to provide a HoverProvider for my editor but I can’t seem to render the element with a different foreground or classList, Am I doing something wrong here? It works okay but the style didn’t load / inserted to the hover content. I’m using IMarkdownString

sliding menu hover effect in react js

https://codepen.io/shoumiksk/pen/PoJmQEN

This is the html css version of what i wanna achieve in React.

Here is my code in react:

function App() {
const marker = document.querySelector('#marker')
      const item = document.querySelectorAll('ul li a')
      function indicator(e){
        marker.style.top = e.offsetTop+'px';
        marker.style.width = e.offsetWidth+'px';
        
      }
  return (
    <div className="App">
    <ul>
      <div id="marker"></div>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>Home</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>about</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>services</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>contact</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>team</a></li>
    </ul>
    </div>
  );
}

CSS:

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul {
  position: relative;
}
ul li {
  list-style: none;
  font-size: 2rem;
}
ul li a {
  position: relative;
  text-decoration: none;
  padding: 0 1rem;
}
#marker {
  height: 3rem;
  position: absolute;
  top: 0;
  background-color: #2196f3;
  transition: 0.5s;
}

But this doesn’t work as expected, sometimes it works after refreshing it doesn’t.

I know i’m doing something wrong, any other way to do this?

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 to use vue and webtorrent to download ordinary torrent link?

How to use webtorrent to download ordinary torrent link? I know that stream exchange is required. How to do it? Does anyone give an example
enter image description here

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");
     
  }

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/[email protected]/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:[email protected]" 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/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

</body>

</html>

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

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”)
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>