Category: javascript

I would like to extract texts from a numbered list to an array in javascript using regex.

1. this is sentence one
2. this is sentence two
3. this is sentence three

Expected output:
Array = [“this is sentence one”, “this is sentence two”, “this is sentence three”]

Appreciate if explanation provided.

Consider this code snippet:

<Typography className={classes.welcomeMessage} variant="h1">
              A <span className={classes.redText}>smart nation </span> approach
              to <span className={classes.redText}>safety.</span>
</Typography>

Essentially I want to have one sentence, but some of the words in that sentence are of red colour. redText and welcomeMessage contain the same properties except for the fact that the colour is different. However, the text comes up like this:

Asmart nationapproach tosafety.

I presume the span component is messing with the spacing. Is there an easy fix or ideal way of dealing with this?

I’ve been trying to do some html and css but I’m really bad at this so far. I was using a function that would check if two selectors match. A friend of mine came up with this code but neither of us fully understands how the return of the “tag.class” case works. My question is, if it doesn’t divide the newSelector, how can it succesfully check the tag and class?

var matchFunctionMaker = function(selector) {
  var selectorType = selectorTypeMatcher(selector);
  var matchFunction;
  if (selectorType === "id") { 
    matchFunction = nuevoSelector => '#' + nuevoSelector.id === selector;
  } else if (selectorType === "class") {
    matchFunction = nuevoSelector => {
      var lista = nuevoSelector.classList;
      for (let x of lista) {
        if (selector === '.' + x) return true;
      }
      return false;
    } 
  } else if (selectorType === "tag.class") {
    matchFunction = nuevoSelector => {
      var [tag, clase] = selector.split('.');
      return matchFunctionMaker(tag) (nuevoSelector) && matchFunctionMaker(`.${clase}`) (nuevoSelector);
    };
  } else if (selectorType === "tag") {
    matchFunction = nuevoSelector => nuevoSelector.tagName.toLowerCase() === selector.toLowerCase();
  }
  return matchFunction;
};

Thanks in advance!

I am trying to move the ball to the point where the mouse clicks. The function is logging the X and Y but not moving the ball. What am I missing here?

Typescript react component

  const PlayArea = () => {
  let top = 'inherit';
  let left = 'inherit';
  
  document.addEventListener("click", function(e){
    console.log((e.clientX + 25) + 'px')
    top = (e.clientY - 25) + "px";
    console.log(top)
    left = e.clientX - 25 + "px";
  });
  return (
    <>
      <div className="ball" style={{ transform: `top ${top}, left ${left}` }}></div>
    </>
  );
};

export default PlayArea;

css

.ball {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: #0b8027; 
  position:absolute;

}

I have to use “set timeout” to get the data from the parent component, so I can load it onto the page before the

I wish to replace this with a promise or async function. But I can’t seem to get the syntax right.

Here is the code:

angular.
  module('fwcForms').
  component('tableFreetext', {
    templateUrl: _formPath+'/fwc-form/components/table-freetext.template.html',
    bindings: {
      model: '=',
    },
    controller: function TableFreetextController() {
      var self = this;
      this.$onInit = function() {
        setTimeout(()=>{
          self.newValue = self.model.dataRowsPlaceholder;
        },1000);
      }
    }
  });

I wish to replace:

setTimeout(()=>{
  self.newValue = self.model.dataRowsPlaceholder;
},1000);

With something like

var myPromise = new Promise().then()......

Basically wait until the data has been loaded from the parent function so it can be displayed on the page. Right now the page loads before the data.

I am doing:

let n = 00000000000000000000000000001011;

console.log(n); // 521 

1. Why is it giving me 521?

2. Actually I was doing a program to count the total number of 1 in the number, so I started with the approach of converting my number to a string and then split it with n.split("") and using map to return new every element with Number(n) and later counting the number of 1 in array but its not working?

I’m trying to create a reaction where if you put in the wrong input, then you will get a notification at the bottom of the input that will tell you what you did wrong. I finished the ccs and html, but I seem to have struggled with the javascript. I think I may have messed this up or something is wrong with my script. Could someone try to see if I messed up on something, or if possible, show me an easier way of doing this, because I think I may have overcomplicated this simple task.

Here is the webpage code

This is what the reactions are supposed to look like

First of all, I’m new in web development, so this may be something really simple to answer (or at least I hope so).

I was trying to implement filepond in a project when I started running into problems.
Following a video guide I could use the library without any problems through CDNs, so I decided to try with npm installations by myself, but that’s when I started getting errors.

I can’t past the import part from the quick start guide (https://www.npmjs.com/package/filepond) and I would like someone to pin point what I’m doing wrong.

My Folder Structure:

/node_modules
   /...
/public
   /fileUpload.js
/views
   /index.html
/server.js

My code at the moment:

server.js (I’m running the code inside a node environment, express framework):

const express = require('express');
const path = require('path');

const app = express();

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, './views/index.html'));
})

app.use(express.static('public'));

app.listen(5000);

fileUpload.js (exactly the same as the quick start guide):

import * as Filepond from 'filepond';

const pond = Filepond.create({
    multiple: true,
    name: 'filepond'
});

document.body.appendChild(pond.element);

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FilePond</title>
</head>
<body>
    <input type="file" class="filepond">

    <script src="javascripts/fileUpload.js"></script>
</body>
</html>

Installations: npm i filepond

Error:
Running all the code above I get:

Uncaught SyntaxError: import declarations may only appear at top level of a module

And if I were to change the call of my .js file inside my html for the following one:

<script type="module" src="../public/javascripts/fileUpload.js"></script>

My error would change to:

Loading module from “http://localhost:5000/public/javascripts/fileUpload.js” was blocked because of a disallowed MIME type (“text/html”).

All of the docs that have code examples related to firebase.database are for version 8 and below. I’ve intuited a lot from exploring the exported modules themselves, but one thing I can’t figure out how to update is code like ref.once('value').

Other code is now like:

ref.update(data); // old
update(ref, data); // new

But there is no once to do once to use like once(ref, data). Additionally the created refs seem to lack any property to use.

How is this meant to be updated for Firebase 9.x? The Firebase 9 docs don’t seem to offer any example.

I’m building a drag-and-drop image upload. My requirement is that all images are loaded from their base64 representation, not from a URL (for privacy reasons).

When the user drags an image from the file system, conversion to base64 is easy. But I haven’t found a way to do it for images dragged and dropped from another browser tab.

I see that ondrop I can get the image’s URL using e.dataTransfer.getData('text/uri-list') but that would violate my requirement.

According to this answer from 2014 what I’m trying to do simply isn’t possible. But it’s old so I’m hoping things have changed.

I have inspected the e.dataTransfer object and played with its various properties but haven’t found anything promising.

Hi guys im trying to make a form which when the user enters two values that are the using an f statement same with an onsubmit event handler. that then shows an alert message if they match. my problem is im not seen onsubmit pop up. or an alert i dont know where im going wrong please help.

function nameCheck(){

    let fname = document.querySelector("#fname").value;
    let fname2= document.querySelector("#fname2").value;

    if (fname1 = = fname2){
       alert("The names match ");

} else if{

    alert("They dont match ");
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
    <title> nameCheck</title>

    <script src="java/nameCheck.js" type="text/javascript"></script>

</head>
<body>
 <form action= "">

    Name: <input type="text" id ="fname" name="fname">
     <br><br>
    RenterName: <input type="text" id ="fname2" name="fname2">


    <br>

    <div class = "buttons">
        <input type="submit" onclick()= "nameCheck()" name = "submit"  value="Submit">

        <input type="reset" value="Reset">

    </div>

 </form>
</body>
</html>

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:135:10)
at module.exports (/home/enoque/Downloads/trabalho/my-react-app/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/enoque/Downloads/trabalho/my-react-app/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/home/enoque/Downloads/trabalho/my-react-app/node_modules/webpack/lib/NormalModule.js:471:10)
at /home/enoque/Downloads/trabalho/my-react-app/node_modules/webpack/lib/NormalModule.js:503:5
at /home/enoque/Downloads/trabalho/my-react-app/node_modules/webpack/lib/NormalModule.js:358:12
at /home/enoque/Downloads/trabalho/my-react-app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/enoque/Downloads/trabalho/my-react-app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/home/enoque/Downloads/trabalho/my-react-app/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/home/enoque/Downloads/trabalho/my-react-app/node_modules/react-scripts/scripts/start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:135:10)
at module.exports (/home/enoque/Downloads/trabalho/my-react-app/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/enoque/Downloads/trabalho/my-react-app/node_modules/webpack/lib/NormalModule.js:417:16)
at /home/enoque/Downloads/trabalho/my-react-app/node_modules/webpack/lib/NormalModule.js:452:10
at /home/enoque/Downloads/trabalho/my-react-app/node_modules/webpack/lib/NormalModule.js:323:13
at /home/enoque/Downloads/trabalho/my-react-app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/enoque/Downloads/trabalho/my-react-app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/home/enoque/Downloads/trabalho/my-react-app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/enoque/Downloads/trabalho/my-react-app/node_modules/react-scripts/node_modules/babel-loader/lib/index.js:59:103 {
opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
library: ‘digital envelope routines’,
reason: ‘unsupported’,
code: ‘ERR_OSSL_EVP_UNSUPPORTED’
}

I am trying to look for data-reactid value and replace it with another value.

Here is the code:

Book a Room.

trying to use the code to replace “.0.2.2” with “.0.2.3”

(function () {
var link = document.querySelectorAll('a[data-reactid*=".0.2.2"]') //change example.com to any domain you want to target
var searchString = ".0.2.2" //the string to be searched forEach
var replacementString = ".0.2.3" //the replacement for the searched string 

links.forEach(function(link){
    var original = link.getAttribute("data-reactid");
    var replace = original.replace(searchString,replacementString)
    link.setAttribute("data-reactid",replace)
})

})();

I am working on a checkout page. There is a 12-page contract on the checkout page. I am using jQuery dialog to display this.

There are also forms on this payment page, as you might guess. For example: such as name, surname and address…
The problem is that the dialog opens and closes while entering data into the forms. So it’s instantaneous, but it’s noticeable. For example, the dialog opens and closes quickly when entering a value in the name form.

Are Javascript/jQuery used in input fields?

Yes, it uses jquery in forms too. For example, when you enter data in the delivery address form, the billing address below is automatically filled. So every form has a trigger. As far as I understand, the dialog opens and closes every time jQuery runs. I’m not sure how to find a solution to this. I tried shrinking the text but the problem still persists. The dialog opens and closes every time I input a value. How can I solve this problem? Do you have a recommendation?

I just started learning jquery. Therefore, I am still in the beginning stages.

I want to store a button using local storage. Simply what I want to do is just store the code below locally.

I want to remove the specified class after the button click function and store it in local storage.

$(document).ready(function() {
$(".button").click(function() {
    $(".container").removeClass("content");
});

});

Thanks to everyone who helped with this