Category: javascript

Category Added in a WPeMatico Campaign

Regular expression for UUIDs

This regular expression pattern #([a-fd]{8}(-[a-fd]{4}){3}-[a-fd]{12}) matches something like this #22b584d8-cc9e-4b67-be8f-bdd8ca8c2b6a which is it matches the # and a UUID after the # symbol. How do I update this regular expression pattern so it matches both #22b584d8-cc9e-4b67-be8f-bdd8ca8c2b6a and also this one #33 22b584d-cc9e-4b67-be8f-bdd8ca8c2b6a

JavaScript data post to PHP, why data not receive?

I’m writing PHP website.
My code printing table with delete buttons. Javascript listening click and convert userID to send by fetch api:
JavaScript:

fetch('remove_user.php', { // i've tryed to add php code to index.php but also remove_user.php does not working
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'user_id=' + encodeURIComponent(userId),
      })
        .then(response => response.text())
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.error('Error: ', error);
        });
    }

PHP:

if (isset($_POST)) {
    if (isset($_POST['user_id'])) {
        $userId = $_POST['user_id'];
        $response = "Received data: " . $userId;
    } else {
       $response = "No data";
    }
 echo $response;
}

I want to send value from JavaScript and get it by PHP code. JavaScript start sending after click button on the website.

I tried aJax, REST API; methods: Get, Post or Put.

Also move post check code in main PHP file and new file contain only receive data core.

I need to edit and then save json file after press button.

Could it work or i need find other option to send data, or I make some big mistakes?

How to convert image to tensor in Javascript and HTML?

I’m trying to create a webpage where I can select and display a local image, alongside a prediction made by a TensorFlow model. To feed the image to the model it needs to be in a tensor with values for each pixel. How can I convert the image to a tensor of pixel values? The example code is below.

<!DOCTYPE html>
<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"> </script>

      <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js"></script>
    <title>display image</title>
  </head>
  <body>
      <input type="file" accept="image/*" onchange="loadFile(event)">
      <p id="result">Prediction </p>
      <p><img id="output" width="200"/></p>
      <script>
          var loadFile = function(event) {
              var image = document.getElementById('output');
              image.src=URL.createObjectURL(event.target.files[0]);
          };
          //Some method to convert the image into a tensor
      </script>
  </body>
</html>

Is Ctrl+F5 still necessary to force the latest JavaScript to load for a website?

Our lead web developer is saying:

“The JavaScript code is now versioned in our new code and should automatically refresh when a new version is out. Yet we are still finding that it doesn’t always work. Feel free to raise this with Google and Microsoft”.

So I’m asking. Is this still “a thing” in 2023? What are some options that he might not be aware of?

I am not qualified to answer this, so that is why I am asking smarter minds than my own.

I searched through the answers here on Stackoverflow and sent them to him. His reply is in the quote above.

Cannot see HTML div

I am starting to build a website for the first time but I am having trouble with the .Main div. I am giving it a ‘background-color: orange;’ on the CSS but I cannot see it anywhere. When using the inspector, I can see that it is positioned on 1440 x 0. Can someone help with this, please?

This is my code so far…

<!DOCTYPE html>
<html>
<style>
body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    width: 100%;
}

.Main{
    cursor: none;
    background-color: orange;
}

.cursor{ 
    position: absolute;  
    width: 50px;
    height: 50px;
    top: 0;
    left: 0; 
    background-color: #84E6BC;
    border-radius: 50%;
    pointer-events: none;
} 

.cursor.hide {
    opacity: 0;
    pointer-events: none;
}

.cursor-text {
    cursor: text;
}

.banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 40%;
    background-color: #FFFFFF;
    border-radius: 60px;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  
.title {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}
  
.subheading {
    font-size: var(--p-size);
    text-align: center;
    margin-bottom: 40px;
}
  
.smiley {
    fill: #84E6BC;
}
</style>

<body>
<div class="Main">
        <div class="banner">
            <h2 class="title">Thank you!</h2>
            <p class="subheading">I really appreciate you contacting me. I will be in touch shortly.</p>
            <svg class="smiley" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
            </svg>
        </div>
        <div class="cursor"></div>
    </div>

<script>
const cursor = document.querySelector('.cursor')
const main = document.querySelector('.Main');

let cursorSize = 50;

document.addEventListener('mousemove', (event) => {
  
    cursor.style.left = `${event.clientX - cursorSize / 2}px`;
    cursor.style.top = `${event.clientY - cursorSize / 2}px`;

    const isSelectable = event.target.tagName === 'P' || event.target.tagName === 'H2';
    if (isSelectable) {
        cursor.classList.add('hide'); // Hide the cursor when mouse is over text or text is selected
        main.classList.add('cursor-text');
    } else {
        cursor.classList.remove('hide'); // Show the cursor when mouse is not over text and no text is selected
        main.classList.remove('cursor-text');
    }
});

document.addEventListener('mousedown', (event) => {
    cursorSize = 20;
    pointerStyle(event, cursorSize)
});
  
document.addEventListener('mouseup', (event) => {
    cursorSize = 50;
    pointerStyle(event, cursorSize)
});

let pointerStyle = (event, size) => {
    let newX = event.clientX - size / 2;
    let newY = event.clientY - size / 2;
    
    cursor.style.width = `${size}px`;
    cursor.style.height = `${size}px`;
    cursor.style.left = `${newX}px`;
    cursor.style.top = `${newY}px`;
}
</script>

</body>
</html>

React line chart background fill

I have a line chart in my React application created using Chart.js library. The line chart has a background fill applied to it, but I’m facing an issue where the fill covers the y-axis border between 0 and the first data point. I want the border to be drawn over the background color so that it’s visible.

import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const Graph = ({ chartData, chartColour, chartFillColour }) => {

  const options = {
    plugins: {
      legend: {
        display: false,
      }
    },
    scales: {
      x: {
        grid: {
          display: true,
          drawBorder: true,
          drawOnChartArea: false,
        },
        ticks: {
          display: true,
        }
      },
      y: {
        grid: {
          display: false,
          drawBorder: true,
          drawOnChartArea: false,
        },
        ticks: {
          display: true,
        }
      }
    }
  }

  const data = {
    labels: chartData.labels,
    datasets: [
      {
        data: chartData.data,
        backgroundColor: chartFillColour,
        borderColor: chartColour,
        pointRadius: 0,
        fill: true,
      }
    ]
  }

  return chartData.labels ? <Line data={data} options={options}/> : null;
}

export default Graph;

Is there a way to ensure that the border is drawn over the background color? Any help or suggestions would be greatly appreciated. Thank you!

Trying to copy over formatting from a Google Sheet to a Google Slide

As the title insinuates, I am trying to include a code block in my apps script that will allow me to copy over data from a Google Sheet to a Google Slide. Formatting as in column and row widths, font colors, font sizes, font styles, etc. Below is my script so far:

const PRESENTATION_ID = '1ZAFsD1pLRXYyj-623kAIwHQ6CK77vaT3Y4pMMDgLyDo';
const SHEET_ID = "1JjDBJ-opX6AHL17zGkGV9ZugvZ0Pf-MwaEeLQYkM2aQ";

// Master function; all others below pull in "sections" of data to be used in the master function.
function generatePresentationData() {
  let sheet = SpreadsheetApp.openById(SHEET_ID);
  let spendData = getDataFromSheet_(sheet);
  let slides = getSlides_();
  writeDataToPlayersSlide_(slides, spendData);
  setTableFormatting_(slides);
}

// This function pulls in data from the spreadsheet.
function getDataFromSheet_(sheet) {
  let dataRange = sheet.getRange('A2:L14');
  let data = dataRange.getValues();
  data.shift();
  return data;  
}

// This function identifies the slides for the data to be written to.
function getSlides_() {
  let presentation = SlidesApp.openById(PRESENTATION_ID);
  let slides = presentation.getSlides();
  return slides;
}

// This function writes the data into the slide.
function writeDataToPlayersSlide_(slides, spendData) {
  let slidePlayers = slides[0];

  for(let i = 0; i < spendData.length; i++) {
    slidePlayers.replaceAllText(`{{name${i}}}`, spendData[i][0]);
    slidePlayers.replaceAllText(`{{ytd1_${i}}}`, spendData[i][1]);
    slidePlayers.replaceAllText(`{{bud1_${i}}}`, spendData[i][2]);
    slidePlayers.replaceAllText(`{{rr1_${i}}}`, spendData[i][3]);
    slidePlayers.replaceAllText(`{{ytd2_${i}}}`, spendData[i][5]);
    slidePlayers.replaceAllText(`{{bud2_${i}}}`, spendData[i][6]);
    slidePlayers.replaceAllText(`{{rr2_${i}}}`, spendData[i][7]);
    slidePlayers.replaceAllText(`{{ytd3_${i}}}`, spendData[i][9]);
    slidePlayers.replaceAllText(`{{bud3_${i}}}`, spendData[i][10]);
    slidePlayers.replaceAllText(`{{rr3_${i}}}`, spendData[i][11]);
  }
}

function getTableFormatting_() {
  const range = SpreadsheetApp.openById(SHEET_ID).getRange('A2:L14');
  const backgrounds = range.getBackgrounds();
  const fontWeights = range.getFontWeights();
  const fontColors = range.getFontColorObjects();
  const fontFamilies = range.getFontFamilies();
  const fontLines = range.getFontLines();
  const fontSizes = range.getFontSizes();
  const horizAlign = range.getHorizontalAlignments();
  const vertAlign = range.getVerticalAlignments();
  const numFormat = range.getNumberFormats();
  const fontWrap = range.getWraps();
}

function setTableFormatting_(getTableFormatting_) {
  
  writeDataToPlayersSlide_.setBackgrounds(backgrounds).setFontWeights(fontWeights).setFontColors(fontColors).setFontFamilies(fontFamilies).setFontLines(fontLines).setFontSizes(fontSizes).setHorizontalAlignments(horizAlign).setVerticalAlignments(vertAlign).setNumberFormats(numFormat).setWraps(fontWrap);
}

Here are links to my source sheet and slides (make a copy if you want to use them)

Slides: https://docs.google.com/presentation/d/1ZAFsD1pLRXYyj-623kAIwHQ6CK77vaT3Y4pMMDgLyDo/edit#slide=id.p

Sheet: https://docs.google.com/spreadsheets/d/1JjDBJ-opX6AHL17zGkGV9ZugvZ0Pf-MwaEeLQYkM2aQ/edit#gid=0

I figured for the formatting piece I would have to “pull in” the formatting from the sheet which is what the getTableFormatting function is doing. I am lost on how to “set” the formatting to the slide though. Any help would be much appreciated.

I can’t add numbers together using JavaScript, why? [duplicate]

I am a beginner at JavaScript and am currently trying to create a very basic webbsite for throwing dice. For some reason I can’t add two numbers together correctly. The following code is supposed to add the value of each dice, but doesn’t. Could someone please explain why, and how to fix it?

        let numRolls = document.getElementById('numhitrolls').value;
        let modifier = document.getElementById('tohit-modifier').value;
        

        if(document.getElementById('neither').checked == true){
            for( let i = 0; i < numRolls; i++){
                roll = (Math.floor(Math.random() * 20) + 1);
                roll += modifier;
                alert(roll);
                }

For some reason I get a message with a number that is way to high. I want to add the value of the modifier and the roll, but instead I’m getting a value such as ‘1112’ (modifier = 12), and I can’t understand why.
Help is much appreciated

discord.js-selfbot-v13 Old Button Click

const { Client } = require('discord.js-selfbot-v13');
const client = new Client({});

client.on('ready', () => {
  console.log('Bot is ready');
});

client.on('messageCreate', async (message) => {
  if (message.author.bot) { 
    try {
      await message.clickButton();

    } catch (error) {
      console.log('X');
    }
  }
});

client.login("token");

Thats my code block but i cant click old buttons, i can only click to the buttons that occur after I run the bot. How can i click old buttons, can anyone tell me?

i can only click to the buttons that occur after I run the bot.

Format on save with Prettier in Promises

Is there a way to fix the format with promises in VS Code?
when I format with prettier or any other options, the code look like this /

const GET_USERS = () => {
  fetch('https://jsonplaceholder.typicode.com/todos/1').then((resolve) => {
    resolve.json().then((json) => {
      console.log(json);
    });
  });
};

and I really want that the code look like this /, without stop using prettier

const GET_USERS = () => {
  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((resolve) => {resolve.json()
    .then((json) => {console.log(json);
    });
  });
};

H captcha callback not executing

hcaptcha.render(document.getElementById("formcontain"), {
        "sitekey": "xxxxxxxxxx",
        "data-callback": "formsubmit"
     })

my code isnt working for the callback. Callback function isn’t being ran. idk what to do

I tried the code but it didnt run the callback.

Copy of my webpage pops up in Chrome Dev Tools, and I don’t know what it means

I tried to check that nobody asked a similar question before, but was not really sure what to search for, and did not find anything that fits.

I’m currently working on a PHP/HTML/JS/CSS project, and today something suddenly popped up in Chrome Dev Tools. Here’s a screenshot:

Chrome Dev Tools screenshot showing a second instance (?) of the currently active page, but with an orange document icon next to it

I’ve circeld the thing that’s confusing me in green.

Now, this happens when I trigger once specific element’s onclick event (by clicking it, of course). The event calls a super simple function that essentially just changes the .innerHTML property of another element. Nothing complicated, and also not the only occurence where i manipulate an .innerHTML property via JS in this project and not the only onclick event. But this is the only one that triggers this behavior.

A second “instance” (?) of the page appears in Chrome Web Dev, but with an orange document icon next to it (rather than the usual gray icon next to the “original” document, which you can see in the line right above the orange one).

Here’s what Chrome Dev Tools displays when I click this new orange “instance” (or whatever) of my page:

Chrome Dev Tools screenshot of what happens when I click the new, orange page instance. In the Sources tab it simply reads "1 | Unable to fetch script source."

I have no idea what this means. Also could not find any Chrome documentation that would explain what the orange icon might mean.

Anybody happen to have any clue? Thanks in advance.

My Custom HTML block, running a custom JS script, in footer of WordPress site has suddenly stopped working

hope this finds you well!

I’m not the greatest with HTML and JS, so apologies if there’s something really simple I’m overlooking! So I don’t need to print my email address in HTML, I used a simple JavaScript script I found somewhere on this site.

This worked well for weeks with no issues, but seemingly overnight it has stopped working. As far as I know, I haven’t made any changes that should affect this. I hadn’t changed anything in the footer or footer settings. I’m still able to see the HTML trying to run the script in ‘view-source’, and I can see the object itself in ‘Inspect’ – the <p> section is fully visible (albeit with no contents), but the <script> section seems to have no attributes/dimensions (if that makes sense!) I even tried adding custom color and visibility to the class through CSS in a last-ditch effort, but that didn’t help either.

Here’s the code:

function gen_mail_to_link(lhs,rhs,subject) {
    document.write("<a class="email" href="mailto");
    document.write(":" + lhs + "@");
    document.write(rhs + "?subject=" + subject + "">" + lhs + "@" + rhs + "</a>");
}

This is displayed in the site’s footer using a Custom HTML block in WordPress:

<p>
    <script type="text/javascript">
        gen_mail_to_link('me','fakeemail.com','Enquiry');
    </script>
    <noscript>
        <em>Enable JavaScript to see email address</em>
    </noscript>
</p>

Hope someone can make some sense out of any of this! If anyone is able to point me in the right direction I’d be very appreciative. Many thanks 🙂

Preventing scroll with 100% body height when the virtual keyboard’s open?

I have a chat app with sticky header and footer elements. When the mobile virtual keyboard is open, I set the document’s height to window.visualViewport.height. E.g. if the browser’s height is 1000px and the virtual keyboard is 400px, then window.visualViewport.height is 600px and both <html> and <body> are set to 600px. The header and footer would both appear correctly within the 600px viewport.

However, users can still scroll the whole page up by 400px, meaning they’ll see 400px of empty space at the bottom. How can I prevent this empty space from showing up while still having the sticky header/footer?

I tried:

  1. Detecting scroll events, but they aren’t fired
  2. Using an IntersectionObserver on an element below the 600px viewport, but it never triggers
  3. Using position: fixed on the footer, but it doesn’t stick to the bottom when scrolling
  4. The document’s scroll Y position is always 0

Mostly tested in Android + Chrome, but same issue occurs in iOS + Safari.

Video demo: https://i.imgur.com/OMSXAAt.mp4

using an element from an function inside of another function in React js

the first function is this and i want to use count inside of the second function:

`const ProductListItem = ({
  item: {id, title, description, price, currency, images, category}, 
  imageSize,
  margins,
  onPress,
}) => {
    const [count, setCount]=useState(0);


    const countAddHandler = () => {
      setCount(count + 1)
    }
    const countSubtractHandler = () => {
      setCount(count - 1)
    }
    const countNumHandler= () => {
      if (count >= 0) {
        return count
      }
      else
      setCount(0)
      return count
    }

  return ( 
etc...`

This is the second function:

`export default function OrderCheckoutScreen({}) {
  const navigation = useNavigation();
  const dispatch = useDispatch();

  const {selected_products, loading, success, message} = useSelector(
    state => state.products.orderCheckout,
  ); 
etc...`

Note that their is no big function that they are all nested in but these function are in the same file completely separated from each other.

i tried changing the first function to look like this:
export default function OrderCheckoutScreen({count})

while adding this to the first function:
OrderCheckoutScreen({count})

but i got count as undefined value.