Category: javascript

This is what I have so far:

for(var i;i< 99999;i++){
  if(mouse.x == element.x,mouse.y == element.y){
    element.click

I am trying to have a separate class full of my functions so index.js doesn’t get cluttered up. The problem I encountered is that my new lib.js file cannot work with discord.js. I am planning on adding multiple, more complex functions, so replacing lib.start() with msg.channel.send('Game Started') won’t fix my issue. Is there a way I can get discord.js commands to work in lib.js so I can call them into index.js?

index.js

const Discord = require('discord.js')
const client = new Discord.Client();

const lib = require("./classes/lib");

const { token } = require('./Data/config.json');

client.on('ready', () => {
  console.log(`Logged in as ${client.user.tag}!`);
})

client.on('message', async msg => {
  if(msg.content.startsWith("m!")) {
    const command = msg.content.substring(2)

    switch(command) {
      
      //Calling 'start()'
      case "start game" : lib.start(); break;
    
      default: msg.channel.send('Unknown Command');
    
    }
  } 
})

client.login(token)

lib.js

function start() {
    msg.channel.send('Game Started');   //Trying to get this to work
}

module.exports = {start};

I’m trying to use js in a way that when you hover the mouse over text links, the background image changes with each link.
I’ve been able to initiate the Event Listener to the link texts but am unable to direct the output to the background image div (style elemet)

Here is my html code

<div id="livestream">  
      </div>
      <div id="wedding">  
      </div>
      <div id="documentary">  
      </div>

      <div class="container text-box">
          <a href="#">Livestreaming</a> 
          <a href="#">Weddings</a>
          <a href="#">Documentaries</a>
      </div>

My css, which im stuck too;

.landing #documentary{
    background-image: url("/img/pic-01.jpg");
    background-size: cover;
    height: 100vh;
    z-index: -1;
}

.landing #livestream, #wedding, #documentary{
    display: none;
}

.text-box a:nth-child(1):hover{
    color: #e08416;
    transition: 0.4s ease;}
}

And here is my js code

document.querySelector('.text-box a:nth-child(1)').addEventListener('mouseenter', entering);
document.querySelector('.text-box a:nth-child(1)').addEventListener('mouseleave', leaving);

function entering(ev){
    ev.currentTarget.style.display = "block";
    console.log('mouseenter  a');
}

function leaving(ev){
    ev.currentTarget.style.display = "none";
    console.log('mouseleave a');
}

I got stuck here

var ratingRef = firebase.database().ref(“hollywood/”); ratingRef.orderByValue().on(“value”, function(data) { data.forEach(function(data) { var name = (“The ” + data.val().name + ” rating is ” + data.val().director +data.val().
year);
var pic= data.val().src;
alert(pic)
var fame= $(“#tame”).attr(“src”,pic +””)
$(“#test”).append(name +”
“);
}); });

Here is a codesandbox to see my problem replicated: https://codesandbox.io/s/inspiring-haslett-1c8sw?file=/pages/index.js

I want to ensure the confirmPassword field matches the password field, however it will always say “Passwords match”, it never changes.

I have followed the docs however I cannot seem to get the functionality im after. I have set the mode to onChange

Here is my form:

import { SubmitHandler, useForm, useFormState } from "react-hook-form";

function IndexPage() {
  //Hook form
  const {
    register,
    watch,
    formState: { errors, isValid, dirtyFields }
  } = useForm({
    mode: "onChange",
    defaultValues: {
      email: "",
      password: "",
      confirmPassword: "",
      username: "",
      firstName: "",
      surname: "",
      isShop: false
    }
  });
  const { password } = watch();

  const [passwordFocused, setPasswordFocused] = useState(false);

  const onSubmit = async (data) => {
    //submit here
  };

  return (
    <>
      {/* NEW SIGNUP FORM */}
      <main className="min-h-screen flex">
        <div className="w-full flex flex-col py-12 md:w-1/2 flex-grow min-h-full">
          <div className="mt-6 h-full w-full flex flex-col md:w-96 mx-auto">
            <form
              onSubmit={onSubmit}
              autoComplete="off"
              className="space-y-6 relative flex flex-col w-full flex-1"
            >
              <span className="flex-1"></span>
              {/* STEP 1*/}
              <div>
                <div className="space-y-1">
                  <label
                    htmlFor="password"
                    className="block text-sm font-medium text-gray-700"
                  >
                    Password
                  </label>
                  <div className="mt-1">
                    <input
                      {...register("password", {
                        required: true,
                        minLength: 8,
                        maxLength: 50,
                        pattern: /^(?=.*[A-Za-z])(?=.*d)[A-Za-zd@$!%*#?&^_-]{8,}$/
                      })}
                      id="password"
                      name="password"
                      type="password"
                      autoComplete="current-password"
                      required
                      className="input w-full"
                      onFocus={() => {
                        setPasswordFocused(true);
                      }}
                      onBlur={() => {
                        setPasswordFocused(false);
                      }}
                    />
                    <span
                      className={`${
                        passwordFocused && errors.password
                          ? "max-h-46 opacity-100"
                          : "max-h-0 opacity-0"
                      } duration-500 ease-in-out transition-all flex flex-col overflow-hidden`}
                    >
                      <p className="text-gray-600 mt-2">
                        Passwords must contain:
                      </p>
                      <ul className="space-y-2">
                        <li
                          className={`mt-2 ${
                            password.length >= 8
                              ? "text-green-600"
                              : "text-gray-600"
                          }`}
                        >
                          At least 8 characters
                        </li>
                        <li
                          className={`mt-2 ${
                            /[A-Z]/.test(password)
                              ? "text-green-600"
                              : "text-gray-600"
                          }`}
                        >
                          Upper and lower case characters
                        </li>
                        <li
                          className={`mt-2 ${
                            /d/.test(password)
                              ? "text-green-600"
                              : "text-gray-600"
                          }`}
                        >
                          At least one digit
                        </li>
                      </ul>
                    </span>
                  </div>
                </div>
                <div
                  className={`space-y-1 ${
                    !errors.password && dirtyFields.password
                      ? "visible"
                      : "invisible"
                  } `}
                >
                  <label
                    htmlFor="password"
                    className="block text-sm font-medium text-gray-700"
                  >
                    Confirm password
                  </label>
                  <div className="mt-1">
                    <input
                      {...register("confirmPassword", {
                        validate: (value) =>
                          value === password || "Passwords do not match"
                      })}
                      id="confirm-password"
                      name="confirm-password"
                      type="password"
                      autoComplete="confirm-password"
                      required
                      className={`input w-full`}
                    />
                  </div>
                  {errors.confirmPassword
                    ? "Passwords do not match"
                    : "Passwords match"}
                </div>
              </div>
            </form>
          </div>
        </div>
      </main>
    </>
  );
}

export default IndexPage;

I have some JS that works as follows:
If the Word Count button is pressed, go to the Word Count function, if the status of the requested page is 200, then let the url be proxyURL, which is defined correctly in index.html and this as it stands works.

I have then added an else if statement to say if a 404 is returned, then go to the function “WordCountProxyBackup” function, which works the same way as the original, but instead of using “proxyURL”, it uses proxybackupURL, which is defined in index.html

I have intentionally broken by original proxyURL to try and test this, and a 404 is returned, but the button is not finding it’s way to the backup function to then find it’s way to the backup link, can someone help with this? The code is below.

   function Wordcount()
{
    $(".operation").attr('disabled', true);
    this.disabled = true;
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var j = JSON.parse(this.response);
            document.getElementById('output').value = j.answer;
        }else if (this.readyState == 4 && this.status == 404) {
            document.getElementById('output').value = "Error Bad Pathway - Rerouting";
            WordcountProxyBackup();
        }
    };

    let url = proxyURL + "/?text=" + encodeURI(document.getElementById('content').value) + "&route=" + "wordcount";
    xhttp.open("GET",url);
    xhttp.send();
    $(".operation").attr('disabled', false);
}

function WordcountProxyBackup()
{
    $(".operation").attr('disabled', true);
    this.disabled = true;
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var j = JSON.parse(this.response);
            document.getElementById('output').value = j.answer;
        }else if (this.readyState == 4 && this.status == 500) {
            document.getElementById('output').value = "Error Bad Pathway - Rerouting";
            WordcountProxyBackup2();
        }
    };

    let url = proxybackupURL + "/?text=" + encodeURI(document.getElementById('content').value) + "&route=" + "wordcount";
    xhttp.open("GET",url);
    xhttp.send();
    $(".operation").attr('disabled', false);
}

For Javascript

I want code for rainbow option

Im making a plugin for a quiz website and said “I want to make a rainbow option!” so i cam here.

I tried to find a solution to my problem for a few hours and I can’t seem to find it so here is my problem…

I’m not into coding and I’m a complete noob in making websites so bear with me please, I’m trying

I’m using an iframe generator to display a “moving fluid script” that I uploaded to a directory on my website (it’s displayed at ex: mywebsite.com/fluid) and every time that I open that page that script always starts its thing from the start but when I implement it on a homepage with iframe it doesn’t load every time from the beginning like on the mywebsite.com/fluid

I’m sorry if I didn’t explain it correctly but I hope someone understands my problem…

Is there a better way to show content from that page to my homepage but that I still have the ability to use Elementor to add some stuff over that “fluid script” or a way to force iframe to always show the script from the start as its seen when I visit mywebsite.com/fluid?

Thanks!

I’m getting stuck on the logic to use to accomplish this in javascript/jquery and could use some help if anyone had any ideas.

I have table which shows the per item cost of the products on an invoice.

The goal is to find all the products by their class(currently shirtcountrow and hoodiecountrow but there will be more later) and combine the ones that have the same value.

The table currently looks like this:

<table id="productmathtable">
<tr>    
<td>Shirt</td>       
<td><input class="shirtcountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>      
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="100" style="width:60px"></td>
</tr>
<tr>         
<td>Shirt</td>       
<td><input class="shirtcountrow" type="text" value="2" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>       
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>       
</tr>
<tr>         
<td>Shirt</td>       
<td><input class="shirtcountrow" type="text" value="2" style="width:60px"> x     <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>      
 <td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>     
 </tr><tr>       
<td>Hoodie</td>     
 <td><input class="hoodiecountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>         
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td>      
</tr>
<tr>         
 <td>Hoodie</td>        
 <td><input class="hoodiecountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>         
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td></tr>     
</table>

And I want it to look like this after a jquery/javascript function is preformed:

<table id="productmathtable">
<tr>    
<td>Shirt</td>       
<td><input class="shirtcountrow" type="text" value="8" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>      
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="200" style="width:60px"></td>
</tr> 
<td>Hoodie</td>     
 <td><input class="hoodiecountrow" type="text" value="8" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>         
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="280" style="width:60px"></td>      
</tr>   
</table>

I am pretty sure i need to change my html so it’s easier to identify each part that i want to change, but im not exactly sure how

i am currently working on an eCommerce website and I’ve got the HTML and CSS codes down. Right now, i am currently working on the JavaScript for the add to cart functionality.
i have an array of 48 objects of products.
const products = [
{
id: 0,
name: “product one”,
price: 3000,
instock: 10,
category: “first”,
description:
“lhjsdbf whaiudehwi hlawbdiw lawdhawiudh IWUEHiawb hjabd”,
imgsrc: “img/jeans.jpg”,
},..]
and as a result, the page doesn’t load on my browser. i have also decided to instead make 4 array of products objects but that messes with the add to cart functionality even though the page loads.
merging the 4 arrays into one doesn’t work either. gives the same problems as a single array would.

what can i do?

my javascript is rusty, and I am having trouble understanding the code is hosted at w3schools – https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp. But the full code I will add below.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]    
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    chapterSel.length = 1;
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    //empty Chapters dropdown
    chapterSel.length = 1;
    //display correct values
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}
</script>
</head>   
<body>

<h1>Cascading Dropdown Example</h1>

<form name="form1" id="form1" action="/action_page.php">
Subjects: <select name="subject" id="subject">
    <option value="" selected="selected">Select subject</option>
  </select>
  <br><br>
Topics: <select name="topic" id="topic">
    <option value="" selected="selected">Please select subject first</option>
  </select>
  <br><br>
Chapters: <select name="chapter" id="chapter">
    <option value="" selected="selected">Please select topic first</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">  
</form>

</body>
</html>

How does this part of the code work?

for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    chapterSel.length = 1;
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    //empty Chapters dropdown
    chapterSel.length = 1;
    //display correct values
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }

Im not understanding completely how the code works. Please correct me where I falter.

• var subjectSel = document.getElementById("subject"); this gets the value of the option that is currently selected in the dropdown right?
• im not sure what this means for (var x in subjectObject) { subjectSel.options[subjectSel.options.length] = new Option(x, x);. is it counting the number of options in the dropdown? what is new Option(x, x)?
• subjectSel.onchange basically says if the 1st dropdown changes then do the following code. does chapterSel.length = 1; select the 1st option in the 2nd dropdown being what is already in the html – please select subject first?
• for (var y in subjectObject[this.value]) { topicSel.options[topicSel.options.length] = new Option(y, y); } . What happens here? similar to the first dropdown, is it counting the number of the options in the dropdown?

Im not sure at what point or how it is determined which piece of information in the subjectobject object is put into which dropdown. how is the following 3 lines associated:

for (var x in subjectObject) {
 for (var y in subjectObject[this.value]) {
var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {

I can guess that it is linked to the object subjectobject, and I can see that “this.value” is getting nested further and further to select the relevant values. can you explain further how it is picking the value of the array and not the id, i.e. html,css, javascript, and not 0,1,2?

thanks in advance for your help

I am trying to search a MySQL database based on the north, south, east, and west bounds of a map. I am using Nodejs with express. When I use postman or enter the url in with the LAT and LON for the search it will work just fine. The issue comes when I try to build the URL sting form the front-end. I get back and empty JSON object.

app.get('/search', (req, res) => {
  try {
    connection.query(`SELECT * FROM photos WHERE lat BETWEEN '${req.query.north}' and '${req.query.south}' and lng BETWEEN '${req.query.west}' and '${req.query.east}'`, function (error, results, fields) {
      if (error) throw error;
      //console.log(results);
      res.send(results);
    });
  }
  catch (exception_var) {
    console.log("Error");
  }
})

This is the front-end client

async function mysearch() {
    myFeatureGroup.clearLayers();
    const mapEast = map.getBounds().getEast().toString();
    const mapWest = map.getBounds().getWest().toString();
    const mapNorth = map.getBounds().getNorth().toString();
    const mapSouth = map.getBounds().getSouth().toString();
   
    // http://127.0.0.1:3000/search?north=42.06254817666338&south=43.002638523957906&east=-89.55780029296875&west=-91.41448974609375
    // http://127.0.0.1:3000/search?north=${mapNorth}&south=${mapSouth}&east=${mapEast}&west=${mapWest}

    fetch(`http://127.0.0.1:3000/search?north=${mapNorth}&south=${mapSouth}&east=${mapEast}&west=${mapWest}`)
        .then(response => response.json())
        .then(data => {
            console.log(data);
        });
}

I don’t have an idea, how can I get values from this JSON:

https://disease.sh/v3/covid-19/vaccine/coverage/countries/Poland

I would like to display this data in a graph with Chart.js.
But unfortunately, as you can see, the headers are in the form of a date and I don’t know how to get these values.
Thank you for your help and best regards.

How I can develop an customize HTML5 player With autoplay videos without any library , I sarched about this and develop one Like this by my edite https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player
but I need to build more advinced one Like Youtube Player and other website , I want more experiences and advice To make an resolution Choice ex : ( 144 – 240 – 720 – 1080 ) ; and more 🙂

I have a problem when using cheerio to retrieve news headline data. the case is that when I took the headline, the data obtained was data from 4 days ago. How can I get the latest data from the website? I’ve tried clearing cache and cookies, but it’s not working

this is my code

'use strict';
require('colors');

const request = require('request');
const cheerio = require('cheerio');
let url = 'https://prokalteng.jawapos.com/index-berita/';

request(url, function (err, res, body) {
   if (err && res.statusCode !== 200) throw err;

   let $ = cheerio.load(body);
   $('div.td_block_wrap.td_flex_block_1.tdi_74.td_with_ajax_pagination.td-pb-border-top.td_block_template_1.td_flex_block div[id=tdi_74] div div div.td-module-meta-info h3.entry-title.td-module-title').each((i, value) => {
       $(value).find('a').each((j, data) => {
           return process.stdout.write($(data).text() + 't');
       });
       process.stdout.write('n');
   });
});

this is the result and that data from 4 days ago
the result and data from 4 days ago

this is latest data
latest data