Category: javascript

I’m trying to insert a dropdown in the google docs table cell but cannot find anything related to doing it, is it possible?

var dropdownCell = tableRow.appendTableCell('')
var rule = document.newDataValidation().requireValueInList(['Yes', 'No'], false).build();
cell.setDataValidation(rule);

I created a basic image slider for a client project using HTML and CSS referencing this tutorial. However, I would like to convert the navigation to JavaScript and avoid using anchor tags since this does not seem like the most appropriate solution. Any ideas?

HTML:

<div class="slider-wrapper">
    
<div class="slider">
<img id="slide-01" src="/image-01.jpg">
<img id="slide-02" src="/image-02.jpg">
</div>
      
<div class="slider-nav">
<a href="#slide-01"></a>
<a href="#slide-02"></a>
</div>
    
</div>

CSS:

.slider-wrapper {
  position: relative;
}

.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 30px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
  object-fit: cover;
}

.slider-nav {
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  overflow-x: hidden;
}

.slider-nav a {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background-color: #0d0d0d;
  transition: opacity ease 250ms;
}

I’m making a clicker game and I need to wait 1 second and then clicks = clicks + CPS and I cant fiqurout the timeout method.

I tried:

delay(1000);
clicks = clicks + CPS

:and it told me delay has 0 parameters not 1.
every other source says otherwise

Is it possible to code a website, where the users can create f.e flashcards, save them, get a code or a number sequence, that can be used by others and other devices? When they insert the code the already made flashcards should load up.

If it is, where should I start. I haven’t found anything similar to this online. Also I don’t know how to search for it as well. Thank You

I can’t figure out why mongoose can’t complete this Model.create.

same connection works fine with other controller functions

vscode

postman

i am trying to create a new document but my code just gets stuck

I want to achieve this effect with a block of text, where each letter changes to either another font or icon on mouse-hover. I was unable to find the right terms to look up what something like this could be called. The link to the page is below. Once you hover on the text you will be able to see the effect;

http://www.other-studio.com/

I am trying to send over some info from my extension to a website that I am not hosting and with that information I am trying to change some variables on the website. The issue is that I am successfully sending over the info to the website, but the variables aren’t being changed to the desired values. The extension is opened on the same tab as the website that I am trying to access.

content.js

chrome.runtime.connect();

console.log("Loaded");

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  const p = request[0]
  UPunkte = p
  UKokku = p

  const t = request[1]
  tehteidTasemeti = [0, Math.round(t/5), Math.round(t/5), Math.round(t/5), Math.round(t/5), Math.round(t/5)]
  console.log("Set"); // gets outputted into the console in inspect element
}
);

The variables that I am trying to change are UPunkte, UKokku and tehteidTasemeti.
This is how they are declared on the website:

UPunkte=0;
UKokku=0;
tehteidTasemeti = [0, 0, 0, 0, 0, 0];

sketch.js

let userinputP
let userinputT
let execute

function setup() {
  noCanvas();

  userinputP = select('#userinputP');
  userinputT = select('#userinputT');
  execute = select('#execute');

  execute.mousePressed(send);
}

function send() {
  const punktid = userinputP.value();
  const tehted = userinputT.value();

  chrome.tabs.query({active: true, currentWindow: true}, gotTabs);

  function gotTabs(tabs) {
    chrome.tabs.sendMessage(
      tabs[0].id,
      {punktid, tehted}
    );
  }
}

I have tried using all sorts of events to send over info to the website, but none of them worked so I came back to this one. I can change the variables thru the console and it works fine, but whenever I try to use my extension to change it, it just doesn’t work.

I am trying to setup a vite project that has multiple entry points.

https://stackblitz.com/edit/vitejs-vite-swtkdv

It is a pretty basic setup taken straight from the vite website that uses vanilla flavour. Only things which I have updated is the following:

• add vite.config.js file with configuration for multiple entry points (check the attached stackblitz link)
• add new files: login/index.html; login/login.js (check the attached stackblitz link)

What I expect to happen is everytime I enter url/login, it should load the page ./login/index.html. However in reality it keeps on loading the ./index.html.

I’m building a simple desktop app based on ElectronJS. The app purpose is to generate mySQL databases by interacting with graphic interface created by me. The problem emerges when I add new columns to existing tables.
Every time I will try to add a column an unexpected number of them will be added. However I seem to see the pattern, every time I go back from the column creator interface to table, the number of columns added when I re-enter any other column creator in any other table will be increased by one.

For instance if I enter a column creator in a table one three times, and i will leave it three times the number of added column in the 4th try will be 4.

Here is how I create new tables:

addTable.addEventListener('click', () => {

    // Create a container for the table
    const tableContainer = document.createElement('div');
    tableContainer.setAttribute('class', 'tableContainer')
    tableContainer.setAttribute('id', `tableContainer_${numberOfTables}`)
    newTableContainer.appendChild(tableContainer);

    /* Input field type text - table name */
    const tableName = document.createElement('input');
    tableName.setAttribute('id', `tableName_${numberOfTables}`);
    tableName.setAttribute('class', 'input');
    tableName.setAttribute('type', 'text');
    tableName.setAttribute('placeholder', 'Table name: ');
    tableContainer.appendChild(tableName);

    /* Input field type button - edit */
    const addColumns = document.createElement('input');
    addColumns.setAttribute('id', `addColumnsButton_${numberOfTables}`);
    addColumns.setAttribute('class', 'add-columns-button table-creator-button');
    addColumns.setAttribute('type', 'button');
    addColumns.setAttribute('data-table-number', numberOfTables)
    addColumns.setAttribute('value', 'Add columns');
    tableContainer.appendChild(addColumns);

    // Attach click event listener to the new add columns button
    addColumns.addEventListener('click', () => {
        // Get the value of the data-table-number attribute
        let buttonNumber = addColumns.getAttribute('data-table-number');
        // Use the buttonNumber to identify the associated tableName
        let tableToEdit = document.getElementById(`tableName_${buttonNumber}`);

        if (tableToEdit) {
            console.log("debug 1")
            editTheTableColums(tableToEdit, buttonNumber);
        }
    });


    /* Input field type button - delete the table */
    const deleteTheTable = document.createElement('input');
    deleteTheTable.setAttribute('id', `deleteTheTableButton_${numberOfTables}`);
    deleteTheTable.setAttribute('class', 'delete-the-table-button table-creator-button');
    deleteTheTable.setAttribute('type', 'button');
    deleteTheTable.setAttribute('value', 'Delete this table');
    deleteTheTable.setAttribute('data-table-number', numberOfTables)
    tableContainer.appendChild(deleteTheTable);

    // Attach click event listener to the new delete button
    deleteTheTable.addEventListener('click', () => {
        // Get the value of the data-table-number attribute
        let buttonNumber = deleteTheTable.getAttribute('data-table-number');
        // Use the buttonNumber to identify the associated tableContainer
        let tableToDelete = document.getElementById(`tableContainer_${buttonNumber}`);

        if (tableToDelete) {
            tableToDelete.parentNode.removeChild(tableToDelete);
        }
    });


    numberOfTables++;
});

Basically it’s a not that complicated createElement script that runs for every button click.

So after I saw that the code is working and is relatively bugs safe, for what I tested I intended to use the same approach to create columns in the created tables. How is that done through the UI is that when you create a table, each of these gets it’s own button that will say Add columns, if you click the button the tables disappear from the screen and you can create new columns by clicking the specific button at the top of the screen that appears there every time after you click the Add column button.

Here us the first function:

/* Handle adding columns to the tables */
function editTheTableColums(tableToEdit, buttonNumber) {
    console.log("debug 2")
    let numberOfColumns = 0;

    /* Check if the table name is not empty */
    if (tableToEdit.value.trim() != "") {

        mainH1.innerHTML = `Adding columns to the table <i>${tableToEdit.value}</i>`;

        /* Chnage the page */
        newTableContainer.style.display = "none";
        editColumnsContainer.style.display = "inline";

        /* Chnage the button visibility */
        addTable.style.display = "none";
        backToMainMenu.style.display = "none";
        backToTheTableCreator.style.display = "inline";
        addColumn.style.display = "inline";
        confirm.style.display = 'inline';

        //Create a new container assosiated with the table
        const tableColumns = document.createElement('div');
        tableColumns.setAttribute('class', 'tableColumns')
        tableColumns.setAttribute('id', `tableColumns_${buttonNumber}`)
        editColumnsContainer.appendChild(tableColumns);

        let currentTable = document.getElementById(`tableColumns_${buttonNumber}`)

        // Loop through the children elements and hide them
        for (let i = 0; i < editColumnsContainer.children.length; i++) {
            editColumnsContainer.children[i].style.display = "none";
        }

        currentTable.style.display = "inline";


        /* Column creator */
        addColumn.addEventListener('click', () => {
            addColumnFunc(buttonNumber, numberOfColumns, currentTable);
        }); // sth broke here
          
    }
}

And here are the two other functions that handle the columns:

const addColumnFunc = function(buttonNumber, numberOfColumns, currentTable) {
    
    console.log("debug 3")
    const currentButtonNumber = buttonNumber;

    // Create a container for the column
    const columnContainer = document.createElement('div');
    columnContainer.setAttribute('class', 'columnContainer')
    columnContainer.setAttribute('id', `columnContainer_${numberOfColumns}_${currentButtonNumber}`)
    currentTable.appendChild(columnContainer);

    let currentColumnContainer = document.getElementById(`columnContainer_${numberOfColumns}_${currentButtonNumber}`);

    /* Input field type text - column name */
    const columnName = document.createElement('input');
    columnName.setAttribute('id', `columnName_${numberOfColumns}_${currentButtonNumber}`);
    columnName.setAttribute('class', 'input column-name');
    columnName.setAttribute('type', 'text');
    columnName.setAttribute('placeholder', 'Column name: ');
    currentColumnContainer.appendChild(columnName);

    /* Input field type button - delete the column */
    const deleteTheColumn = document.createElement('input');
    deleteTheColumn.setAttribute('id', `deleteTheColumnButton_${numberOfColumns}_${currentButtonNumber}`);
    deleteTheColumn.setAttribute('class', 'delete-the-column-button column-creator-button');
    deleteTheColumn.setAttribute('type', 'button');
    deleteTheColumn.setAttribute('value', 'Delete');
    deleteTheColumn.setAttribute('data-column-number', numberOfColumns)
    currentColumnContainer.appendChild(deleteTheColumn);

    // Attach click event listener to the new delete button
    deleteTheColumn.addEventListener('click', () => {
        // Get the value of the data-column-number attribute
        let buttonNumber = deleteTheColumn.getAttribute('data-column-number');
        // Use the buttonNumber to identify the associated columnContaine
        let columnToDelete = document.getElementById(`columnContainer_${numberOfColumns}_${buttonNumber}`);

        if (columnToDelete) {
            columnToDelete.parentNode.removeChild(columnToDelete);
        }
    });


    numberOfColumns++;
};


/* Handle going back from column creator to the table creator */
backToTheTableCreator.addEventListener('click', () => {
    console.log("back")

    mainH1.innerHTML = `Editing ${databaseName}`;

    addColumn.removeEventListener('click', addColumnFunc);

    /* Chnage the page */
    newTableContainer.style.display = "inline";
    editColumnsContainer.style.display = "none";

    /* Chnage the button visibility */
    addTable.style.display = "inline";
    backToMainMenu.style.display = "inline";
    backToTheTableCreator.style.display = "none";
    document.getElementById("add-column").style.display = "none";
    confirm.style.display = 'none';

});

Adding columns for the first time will work as intended, one column will be added, however if I exit and enter any other table two columns will appear, and every exit will increase the number of columns that are being added by one.

Here are the console log outputs after starting the app, created three tables and going through one at a time, adding one column to each one (trying to add only one column to each one)

debug 1
temp.js:132 debug 2
temp.js:179 debug 3
temp.js:226 back
temp.js:91 debug 1
temp.js:132 debug 2
2temp.js:179 debug 3
temp.js:226 back
temp.js:91 debug 1
temp.js:132 debug 2
3temp.js:179 debug 3

The code might seem a bit messy or the comments unprofessional I am really sorry, it’s safe to say that I’m a beginner. I’m also pretty sure that the question may be asked in a badly manner but English is not my first language, so pardon me for any mistakes. I also want to excuse myself for giving so much code but I’m not sure what part of it might cause the issues.

we use the CEFSharp browser for our application.

One of our client pages that we connect with is now using ECMAScript 2020 (ES 11), and our version of CEFSharp does not support it.

My research has suggested that it was introduced in CEFSharp version 80, however, I cannot find confirmation.

Can anyone suggest which version we should update to in order to support ECMAScript 2020 (ES 11) in CEFSharp, while maintaining backwards compatibility.

Thank-you

I have an object with some properties and methods. How do I give it a method that accepts only the name of another one of its methods?

For example, consider the command method in this User class. We want command to accept the name of another method. Using keyof this narrows the acceptable type to User property names; how would we narrow it further to just User method names, without hardcoding them?

class User {
    nameFirst: string;
    nameLast: string;

    command(commandName: keyof this) {
        this[commandName].call(this);
    }

    sink() {}

    swim() {}
}

const alice = new User();
alice.command(`swim`); // Accepts `nameFirst` | `nameLast` | `command` | `sink` | `swim`; we want it to accept only `sink` and `swim`

I am attempting to create a BlackJack game using an object for cards. My project files are in the same directory as a folder titled “cards” that contains images of cards like “A-C.png” for Ace of Clover, “J-D.png” for Jack of Diamonds and “BACK.png” for the back of a card in a dealer’s hand that would flip over when the player doesn’t want to add any more cards to their hand.

Here is the HTML code that I have so far:

var hidden;
var winner; 

var playerScore=0; 
var dealerScore=0; 

var playerHand=0; 
var dealerHand=0; 

var playerAces=0; 
var dealerAces=0; 

let playerCardsArray=[]; 
let dealerCardsArray=[]; 

let discardedCards=[]; 

class Card{
    constructor(cardname, value){
        this.cardname=cardname; 
        this.value=value; 
    }
}

var CAce = new Card("A-C", 11); 
var CTwo = new Card("2-C", 2); 
var CThree = new Card("3-C", 3); // Continue this for all Clover cards

var CTen = new Card("10-C", 10); 
var CJack = new Card("J-C", 10); 
var CQueen = new Card("Q-C", 10); 
var CKing = new Card("K-C", 10); // Repeat this for D, H and S(Diamonds, Hearts and Spades respectively)

let cards = [CAce, CTwo, CThree, CFour, CFive, CSix, CSeven, CEight, CNine, CTen, CJack, CQueen, CKing, 
DAce, DTwo, DThree, DFour, DFive, DSix, DSeven, DEight, DNine, DTen, DJack, DQueen, DKing, 
HAce, HTwo, HThree, HFour, HFive, HSix, HSeven, HEight, HNine, HTen, HJack, HQueen, HKing, 
SAce, STwo, SThree, SFour, SFive, SSix, SSeven, SEight, SNine, STen, SJack, SQueen, SKing]; 

startGame(); 

const HitButton = document.getElementById("HitButton"); 
const StayButton = document.getElementById("StayButton"); 
HitButton.addEventListener("click", hit); 
StayButton.addEventListener("click", stay);

function startGame() {
    shuffleDeck(cards); 
    let hidden = cards.pop(); 
    dealerCardsArray.push(hidden.cardname);  
    dealerHand += hidden.value; 
    dealerAces += checkAce(hidden); 
    while(dealerHand < 17){
        let dealerCard = cards.pop(); 
        let dealerCardImg = document.createElement("img"); 
        dealerCardsArray.push(dealerCard.cardname); 
        dealerCardImg.src = "./cards/" + dealerCard.cardname + ".png"; 
        document.getElementById("DealerCardsShow").append(dealerCardImg); 
        dealerHand += dealerCard.value; 
        dealerAces += checkAce(dealerCard); 
    }
    for(let i = 0; i < 2; i++){
        let playerCard = cards.pop(); 
        let playerCardImg = document.createElement("img"); 
        playerCardsArray.push(playerCard.cardname); 
        playerCardImg.src = "./cards/" + playerCard.cardname + ".png"; 
        playerHand += playerCard.value;
        playerAces += checkAce(playerCard);
        document.getElementById("PlayerHand").textContent = `Player Hand: ${playerHand}`;
    }
}

function shuffleDeck(deck) {
    for(let i = 0; i < deck.length; i++) {
        let j = Math.floor(Math.random() * deck.length);
        let temp = deck[i]; 
        deck[i] = deck[j]; 
        deck[j] = temp; 
    }
    return deck; 
} 

function hit() {
    if(playerHand < 21) {
        let hitCard = cards.pop(); 
        let hitCardImg = document.createElement("img"); 
        playerCardsArray.push(hitCard.cardname); 
        hitCardImg.src = "./cards/" + hitCard.cardname + ".png"; 
        document.getElementById("PlayerCardsShow").append(hitCardImg); 
        playerHand += hitCard.value; 
        document.getElementById("PlayerHand").textContent = `Player Hand: ${playerHand}`;
        playerAces += checkAce(hitCard); 
    }
}

function stay() {
    canHit = false; 
    document.getElementById("HitButton").disable = true; 
    document.getElementById("DealerHand").textContent = `Dealer Hand: ${dealerHand}`;
    reduceAce(playerHand, playerAces); 
    reduceAce(dealerHand, dealerAces); 
    document.getElementById("HiddenCard").src = "./cards/" + hidden.cardname + ".png"; // This is the line that is causing the Uncaught TypeError
    if(playerHand > 21){
        dealerScore += 1; 
        window.alert("The dealer wins the game!"); 
        document.getElementById("DealerScore").textContent = `Dealer's Score: ${dealerScore}`; 
}
    else if(dealerHand > 21 && playerHand <= 21){
        playerScore += 1; 
        window.alert("The player wins the game!"); 
        document.getElementById("PlayerScore").textContent = `Player's Score: ${playerScore}`; 
}
    else if(playerHand > dealerHand && playerHand <= 21){
        playerScore += 1; 
        window.alert("The player wins the game!"); 
        document.getElementById("PlayerScore").textContent = `Player's Score: ${playerScore}`; 
}
    else if(dealerHand > playerHand){
        dealerScore += 1; 
        window.alert("The dealer wins the game!"); 
        document.getElementById("DealerScore").textContent = `Dealer's Score: ${dealerScore}`; 
}
    else{
        window.alert("This game ends in a tie! There is no winner!"); 
        document.getElementById("GameResult").textContent = "This game ends in a tie!"; 
    }
    document.getElementById("StayButton").disable = true; 
}

function checkAce(card){
    cardValue = card.cardname.split("-"); 
    cardFirstInteger = cardValue[0]; 
    if(cardFirstInteger == "A"){
        return 1; 
    else{
        return 0; 
    }
}

function reduceAce(hand, aceCount){
    while(hand > 21 && aceCount > 0){ 
        hand -= 10; 
        aceCount -= 1; 
    }
    return hand; 
}

body{
    text-align: center;
}
img{
    height: 175px; 
    width: 175px; 
}
button{
    width: 100px; 
    height: 50px; 
    font-size: 15px; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Black Jack Game</title>
    <link rel="stylesheet" href="MyAttemptBlackJack.css">
</head>
<body>
    <p id="RoundScore">Round Score</p><br>
    <p id="DealerScore">Dealer's Score:</p><br>
    <p id="DealerHand">Dealer's Hand:</p><br>
    <div id="DealerHiddenCards">
        <img id="HiddenCard" src="./cards/BACK.png">
    </div>
    <div id="DealerCardsShow"></div><br>
    <p id="PlayerScore">Player's Score:</p><br>
    <p id="PlayerHand">Player's Hand:</p><br> 
    <div id="PlayerCardsShow"></div><br>
    <button id="HitButton">Hit </button>
    <button id="StayButton">Stay </button><br>
    <button id="NewGameButton">Click for New Game</button>
    <p id="GameResult">Game Result</p>
    <script src="MyAttemptBlackJack.js"></script>
</body>
</html>

When I run the code I’ve written, I get an Uncaught SyntaxError: Illegal return statement (at content.js:3:6492) before pressing any buttons and Uncaught TypeError: Cannot read properties of undefined (reading 'cardname') at HTMLButtonElement.stay (MyAttemptBlackJack.js:170:69) after pressing the “Stay” button on my web page.

The cards do appear on the browser each time I refresh the page and I am able to hit until my hand is greater than or equal to 21. I did try to dynamically create the img element with the back of the card to avoid this error but that didn’t work either.

I’m creating a month schedule as HTML table with three columns where the first column is the date of the day, the second column is an input field value and third column are phone numbers.

var pdf = new jsPDF({
    orientation: 'p',
    unit: 'mm',
    format: 'a4',
    putOnlyUsedFonts: true
});
var elem = document.getElementById("table-");
var res = pdf.autoTableHtmlToJson(elem);
pdf.autoTable(res.columns, res.data, {
    startY: 30,
    tableWidth: 'auto',
    theme: 'grid',
    headStyles: {
        fillColor: '#a9a6a6',
        textColor: '#000000'
    },
    columnStyles: {
        0: { cellWidth: 15 }
    }
});
pdf.save(`Test.pdf`);

This creates the first and third column correctly, but doesn’t display the input field values in the second column. Those values are stored in localStorage and can be loaded from there, but I don’t know how to add them to the autotable.

When I run my application using node --env-file=.env index.js, the environment variables load correctly. However, when I try to run the same application using nodemon with the script npm run dev, the environment variables are undefined.

• Node.js Version: 20.9.0
• Nodemon Version: 3.0.1

I tried to configure package.json from
"scripts": {"dev": "nodemon index.js"},
to
"scripts": {"start": "nodemon --exec 'node --env-file=.env index.js'"} but it was still undefined.

Tooltips don’t seem to be working on my chart, when I disable chart animations they start working. The error it throws is Uncaught TypeError: c.active is not a function. Is there anyway to bypass this or is there an issue with my code (shown below)?

I’m using chart.umd.js v4.3.2 if that helps.

const ctx = gid('myChart')
const _ = new Chart(ctx, {
    type: 'line',
    data: {
        labels: Object.keys(data.timeMap),
        datasets: [{
            data: Object.values(data.timeMap),
            lineTension: 0,
            backgroundColor: 'transparent',
            borderColor: '#007bff',
            borderWidth: 4,
            pointBackgroundColor: '#007bff'
        }]
    },
    options: {
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                boxPadding: 3
            }
        },
        interaction: {
            mode: 'x',
            intersect: false
        }
    }
})