Category: javascript

I’m working on a pre-built google spreadsheet, and it has a thing looks like “table name” on the very top roll “above” cell A1, which I failed to found what it is called nor how to access it with app script.

What I’m doing is use the sheet as a template, dup it and give it whatever name I want.
I don’t think it is a range, so the code below does not really explain much I guess.

const ss = SpreadsheetApp.getActiveSpreadsheet();
const temp = ss.getSheetByName('template');
const cell = 'the thing to edit';
const name = 'new_name'

temp.copyTo(ss).setName(name).activate()
  .getRange(cell).setValue(name);

I am building a blog web app where I want to display posts on the home page. I am currently using MongoDB to retrieve posts based on tags.

i want the data of the home page to be random and mixed between latest posts and popular posts.

the problem is that i don’t know to prevent duplicate data when getting more data

i am using express with mongo as database.

so after 2 pages i start getting data i already had.
i did handle it in the front-end (react)

but i want a way to handle it in the back-end
like what other websites do.

i used this as an example
the second request suppose to return data but ignore data returned in the first request (page)

db.test.aggregate([ { $match: { tags: { $in: ["python", "java"] } } }, { $sample: { size: 10 } }, { $project: { text: true } }]).toArray()

Then an error was reported:

i use a element plus menu as top navigation bar,and a menu as side bar,i want to implement when i click on the top navigation bar,change the side bar and jump to new page, at once side bar open the first menu.

const changeNavBar = (val: string) => {
  navBarSelect.value = val
  router.push(`/${val}`)
  nextTick(() => {
    siderBar.value.open(menuInfo[val][0].children[0].pathName)
  })
}

 <el-menu
          :router="true"
          :default-active="$route.name"
          class="sideBar"
          :collapse="isCollapse"
          ref="siderBar"
        >
          <template v-for="item in menuInfo[navBarSelect]">
            <el-sub-menu v-if="item.children" :index="item.title">
              <template #title>
                <el-icon><component :is="item.icon" /></el-icon>
                <span class="menuTitle">{{ item.title }}</span>
              </template>
              <el-menu-item v-for="v in item.children" :index="v.pathName">{{
                v.title
              }}</el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="item.pathName">
              <template #title>
                <el-icon><component :is="item.icon" /></el-icon>
                <span class="menuTitle">{{ item.title }}</span>
              </template>
            </el-menu-item>
          </template>
          <div class="sideBarFold" @click="changeCollapse">
            <el-icon :size="25"><Fold /></el-icon>
          </div>
        </el-menu>

const menuInfo = reactive<Record<string, Array<any>>>({
  appAnalyse: [
    {
      title: '数据总览',
      icon: 'PieChart',
      children: [
        {
          pathName: 'OverView',
          title: '工作台'
        }
      ]
    },
    {
      title: '信息管理',
      icon: 'Histogram',
      children: [
        {
          pathName: 'GameManageView',
          title: '游戏管理'
        },
        {
          pathName: 'PlayerManageView',
          title: '玩家管理'
        }
      ]
    },
    {
      title: '数据分析',
      icon: 'DataAnalysis',
      children: [
        {
          pathName: 'KeepView',
          title: '留存分析'
        },
        {
          pathName: 'UserTrendView',
          title: '用户趋势'
        }
      ]
    }
  ],
  appManage: [
    {
      title: '基本信息',
      icon: 'PieChart',
      children: [
        {
          pathName: 'GameBaseInfo',
          title: '基本信息'
        }
      ]
    },
    {
      title: '事件管理',
      icon: 'PieChart',
      pathName: 'EventManage'
    }
  ]
})

Then an error was reported:

Uncaught (in promise) TypeError: Cannot destructure property 'indexPath' of 'subMenus.value[index]' as it is undefined.

While I was debugging, The data was found to be wrong:

const open = (index) => {
        const { indexPath } = subMenus.value[index];
        indexPath.forEach((i) => openMenu(i, indexPath));
      };

this is debbuger info,this should be 基本信息:…,事件管理:….,but

EventManage: {index: 'EventManage', indexPath: ComputedRefImpl, active: {ComputedRefImpl}

数据总览: {index: '数据总览', indexPath: ComputedRefImpl, active:{ComputedRefImpl}

i want to now why,and how to solve

This is a React/ Fabric.js test I’m trying in order to figure out what I’m doing wrong with moving objects in the stack. The canvas inits and the red and blue boxes are there, they can be manipulated using the gizmo, and preserveObjectStacking is working, however, both bringForward and sendBackward report that there is no such function, these are canvas functions, yes? They are in the documentation, but they always error with “* is not a function”
Any help would be much appreciated.

import React, { useEffect, useRef, useState } from 'react';
import { Canvas, Rect } from 'fabric';

const FabricCanvasTest = () => {
  const canvasRef = useRef(null);
  const [canvas, setCanvas] = useState(null);
  const [activeObject, setActiveObject] = useState(null);

  useEffect(() => {
    const initCanvas = new Canvas(canvasRef.current, {
      width: 400,
      height: 400,
      backgroundColor: '#f0f0f0',
      preserveObjectStacking: true,
    });

    const redSquare = new Rect({
      left: 50,
      top: 50,
      fill: 'red',
      width: 100,
      height: 100
    });

    const blueSquare = new Rect({
      left: 200,
      top: 200,
      fill: 'blue',
      width: 100,
      height: 100
    });

    initCanvas.add(redSquare, blueSquare);
    setCanvas(initCanvas);

    initCanvas.on('selection:created', (e) => setActiveObject(e.selected[0]));
    initCanvas.on('selection:updated', (e) => setActiveObject(e.selected[0]));
    initCanvas.on('selection:cleared', () => setActiveObject(null));

    return () => {
      initCanvas.dispose();
    };
  }, []);

  const bringForward = () => {
    if (activeObject) {
      activeObject.bringForward();
      canvas.renderAll();
    }
  };

  const sendBackward = () => {
    if (activeObject) {
      activeObject.sendBackwards();
      canvas.renderAll();
    }
  };

  return (
    <div>
      <canvas ref={canvasRef} />
      <div>
        <button onClick={bringForward} disabled={!activeObject}>Bring Forward</button>
        <button onClick={sendBackward} disabled={!activeObject}>Send Backward</button>
      </div>
      <p>
        {activeObject
          ? `Selected: ${activeObject.fill} square`
          : 'No object selected'}
      </p>
    </div>
  );
};

export default FabricCanvasTest;

I am trying to make a discord bot that users can give themselves role but they shouldn’t get all the roles they want so im trying to filter roles but i couldn’t solve this.

I’ve got the wanted roles for filter, and tried to .addOptions() func and filter roles inside,it didn’t worked.

This issue has been occurring for about a month. It doesn’t happen in Naver Whale browser but does occur in Chrome and Edge. When window.print() is called for the first time, it behaves unexpectedly. How can I resolve this issue?

I’m using Angular, and the parameters required for printing are passed through the URL. When window.print() is called for the first time, the print preview window opens, but the URL gets reset, causing an issue. From the second print onwards, it works as expected. How can I resolve this issue?

I have a time input field in my React app. Code:

      <div style={{ marginTop: '30px' }}>
    <input
      aria-label="Time"
      type="time" 
      onChange={handleTimeChange}
      style={{ padding: '8px', fontSize: '16px', width: 'auto' }}
    />
  </div>

Why on iOS it shows as radio buton? On dekstop it shows as expected as time input field. Using Safari on both devices.

I’m looking for a library that can use SQL queries on JavaScript objects in a web environment. I tried Alasql, but I’m concerned because it doesn’t support many keywords that I need.

Current situation:

• Files (such as CSVs) uploaded by users of the app are stored in IndexedDB in a columnar format using our own logic.
• I’d like to be able to run SQL queries on this data in the web environment when needed.

Requirements:

• Since we don’t know what kind of CSV users will upload, we can’t ‘precisely’ declare column types, etc., using CREATE TABLE.
  • This means it would be the best to query directly from the javascript object/array in memory..
• It should support most of the keywords used in standard SQL.
• Ideally, it should be able to write SQL queries directly on the current columnar data structure.
  • If not possible, I’m also considering extracting only the columns needed for the query and changing the data structure to row-wise.

Are there any good libraries that meet these requirements? Thank you.

I need help Writing a program that declares a named constant to hold the number of quarts in a gallon (4). Also declare a variable to represent the number of quarts
needed for a painting job. Name the variable quartsNeeded, and assign 18 to
it. Compute and display the number of gallons and quarts needed for the job.
Display explanatory text in the format A job that needs 18 quarts requires 4
gallons plus 2 quarts.

import java.util.Scanner;

public class PS2p1 {

public static void main(String[] args) {
    // TODO Auto-generated method stub
    // Declare a constant for the number of quarts in a gallon
    int qrtsinaglln = 4;
    float qrtsNeeded = 18;
    float gallns;
    float remainingqrts;
    
    // INPUTFACE 
    
    Scanner inputdevice = new Scanner(System.in); 
    qrtsinaglln=inputdevice.nextInt();
            
    
    //Process 
    gallns = qrtsNeeded / qrtsinaglln;
    
    remainingqrts = qrtsNeeded % qrtsinaglln;
    
    //OUTPUT 
    System.out.println("A job needs"+qrtsNeeded Quarts Required"+gallns"gallons plus"+remainingqrts"; "
            + "

I am working with an app with this conditions:

1. Client is in different countries. (Local time zone will vary)
2. I do not now exactly which time-zone will server located at.

Example:

In MongoDB using mongoose time stamp functionality :

createdAt: 2024-09-02T22:44:26.794+00:00 //Local time in client: 2024-09-02T16:44:26.794-06:00

Now the issue I am facing is:

“I want to retrieve all the documents created “TODAY” , but the meaning off today is relative to “local time” where the query was used, example:

Day starts in GTM-6 at 2024-09-02T06:00:00.000+00:00
Day starts in GTM-1 at 2024-09-02T01:00:00.000+00:00

So I need the “best practice” to work with dates on javascript.

¿How to tell the query that it needs to use a specific offset?

I have written a CSS animation/parallax effect that works with animation-timeline and I like the result.

This is the code

[data-section-id="66d153c7fa59f85ae17bdd36"] video {
    position : absolute;
    top : 0;
    height: 66vh!important;
    translate: 0 0vh;
    animation: parallax 1s linear both;
    animation-timeline: scroll(root);
    animation-range: cover 30% cover 66%;
}

@keyframes parallax {
    from {
        translate : 0 0vh;
    }
    to {
        translate: 0 -33vh;
    }
}

The video element is in a container with 33vh and when you scroll from top to bottom it should animate the position with translate to reach the end of the screen.

Because it does not work at the moment in Safari and Mozilla I want to use this pollyfill https://github.com/flackr/scroll-timeline to make it cross browser.

The info of the plugin suggests that I can make the CSS animation work cross-browser but from my tests it works only with the JavaScript way.
Therefore I want to convert my above CSS scroll animation in JavaScript.

This is where I am now

var videoElement = document.querySelector('[data-section-id="66d339fcaa91932c1202ad7e"] video');

var scrollTimeline2 = new ScrollTimeline({
        source: document.documentElement,
        axis: "block",
        orientation: 'block'
});

videoElement.animate(
    { transform: ["translateY(0)", "translateY(-33vh)"]},
    {
        duration: 1000, 
        fill: 'both',
        timeline: scrollTimeline2
    }
);

This creates a small parallax effect but not like the CSS code does.
I think that I need to specify rangeStart and rangeEnd to the second argument(object) of .animate but I can not figure the format.

I tried this but it prevents the entire parallax effect from working.

videoElement.animate(
    { transform: ["translateY(0)", "translateY(-33vh)"]},
    {
        duration: 1000, 
        fill: 'both',
        timeline: scrollTimeline2,
        rangeStart: "cover 30%",
        rangeEnd: "cover 66%",
    }
);

From the docs of animate https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#rangeend the format should be valid.

Can someone help please?

I am new on IOS Systems and also new to Apple devices an ran into a big Problem. I created a script that can be implemented in User Websites which is kindo of a voice agent. On non IOS Systems such as Android or a simple Laptop under Windows it runs as expected. The user aks something and gets an answer voice driven. Under IOS it needs some kind of interaction which is done by an modal which opens but after the first message is given out to the user the script stops working. So no second interaction can be done what do i miss or what do i wrong this is the JS script part.

(function() {
        document.addEventListener('DOMContentLoaded', function() {
            // Funktion zum Setzen eines Cookies
            function setCookie(name, value, days) {
                const date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                const expires = "expires=" + date.toUTCString();
                document.cookie = name + "=" + value + ";" + expires + ";path=/";
            }
    
            // Funktion zum Abrufen eines Cookies
            function getCookie(name) {
                const nameEQ = name + "=";
                const ca = document.cookie.split(';');
                for(let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(nameEQ) == 0) {
                        return c.substring(nameEQ.length, c.length);
                    }
                }
                return null;
            }
    
            // Überprüfen, ob der Tooltip bereits geschlossen wurde
            const tooltipClosed = getCookie('tooltipClosed');
    
            // Parameter aus der URL der eingebetteten JavaScript-Datei auslesen
            const scriptTag = document.currentScript || document.querySelector('script[src*="micButton.js"]');
            if (!scriptTag) {
                console.error('Das aktuelle Skript konnte nicht gefunden werden.');
                return;
            }
    
            const scriptUrl = new URL(scriptTag.src);
            const userId = scriptUrl.searchParams.get('user_id');
    
            // Überprüfen, ob die erforderlichen Parameter vorhanden sind
            if (!userId) {
                console.error('Fehlende Parameter: user_id');
                return;
            }
    
            // CSS hinzufügen
            const style = document.createElement('style');
            style.textContent = `
                .mic-checkbox {
                    display: none;
                }
                .mic-checkbox:checked + .mic-button {
                    transform: rotateY(180deg);
                }
                .mic-checkbox:checked + .mic-button span {
                }
                .button-container {
                    perspective: 500px;
                    position: fixed;
                    bottom: 10px;
                    right: 10px;
                    opacity: 0;
                    transform: translateY(10px);
                    animation: fadeInButton 0.5s forwards;
                }
                .mic-button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 100px;
                    width: 100px;
                    border-radius: 100%;
                    transition: transform 0.4s;
                    border: 2px solid #333;
                    transform-style: preserve-3d;
                    position: relative;
                    font-size: 58px;
                }
                .button-message, .mic, .mic-back {
                    backface-visibility: hidden;
                }
                .button-message {
                    position: absolute;
                    width: 100px;
                    height: 100px;
                    z-index: 2;
                    transform: rotateY(0deg);
                    pointer-events: none;
                    left: 0;
                    top: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .button-message img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 50%;
                }
                .mic-back {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    z-index: 2;
                    transform: rotateY(180deg);
                    pointer-events: none;
                    top: 0;
                    left: 0;
                    background-image: url('data:image/png;base64,'); /* Hier dein Base64-Bild */
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    border-radius: 50%;
                }
                .mic-button-loader {
                    position: absolute;
                    height: 102px;
                    width: 100px;
                    background-color: transparent;
                    transform: rotateY(180deg);
                    top: -31px;
                    left: -50px;
                }
                .mic-checkbox:checked + .mic-button > .mic > .mic-button-loader {
                    border-top: 3px solid #AA1111;
                    border-radius: 100%;
                    animation: borderLoader 1.3s 0.2s ease-in-out infinite;
                }
                .mic {
                    position: relative;
                    top: -11px;
                    height: 20px;
                    width: 0;
                    border-radius: 10px;
                    transform: rotateY(180deg);
                }
                .mic:after, .mic:before, .mic-base {
                    position: absolute;
                }
                @keyframes borderLoader {
                    from {
                        transform: rotate(0deg);
                    }
                    to {
                        transform: rotate(359deg);
                    }
                }
                .tooltip-speaksdata {
                    position: fixed;
                    bottom: 25px;
                    right: 110px;
                    background-color: #333;
                    color: #fff;
                    padding: 10px;
                    border-radius: 5px;
                    font-family: 'Montserrat', sans-serif;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    z-index: 1000;
                    width: 170px;
                    opacity: 0;
                    animation: fadeIn 0.5s forwards;
                    transition: opacity 0.5s, transform 0.5s;
                }
                .tooltip-speaksdata span {
                    margin-right: 10px;
                }
                .tooltip-speaksdata .close-tooltip {
                    cursor: pointer;
                    background-color: #555;
                    border: none;
                    color: #fff;
                    border-radius: 50%;
                    width: 20px;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    position:absolute;
                    right:-10px;
                    top:-10px;
                }
                @keyframes fadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(-10px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                @keyframes fadeOut {
                    from {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    to {
                        opacity: 0;
                        transform: translateY(-10px);
                    }
                }
                @keyframes fadeInButton {
                    from {
                        opacity: 0;
                        transform: translateY(10px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            `;
            document.head.appendChild(style);
    
            // Base64-Icons für verschiedene Zustände
            const loadingIconBase64 = 'data:image/png;base64,'; // Lade-Icon
            const successIconBase64 = 'data:image/png;base64,'; // Erfolgs-Icon
            const errorIconBase64 = 'data:image/png;base64,'; // Fehler-Icon
            const defaultIconBase64 = 'data:image/png;base64,'; // Standard-Icon
            const buttonContainer = document.createElement('div');
            buttonContainer.classList.add('button-container');
            buttonContainer.innerHTML = `
                <input type="checkbox" id="micButton" class="mic-checkbox">
                    <label for="micButton" class="mic-button">
                        <div class="mic">
                            <div class="mic-button-loader"></div>
                        </div>
                        <div class="button-message">
                            <img src="${defaultIconBase64}" id="buttonIcon" alt="Speaksdata KI Assistent">
                        </div>
                        <div class="mic-back">
                        </div>
                    </label>
            `;
    
            document.body.appendChild(buttonContainer);
    
            const micButtonCheckbox = document.getElementById('micButton');
            const buttonIcon = document.getElementById('buttonIcon');
    
            // Tooltip-Element erstellen
            if (!tooltipClosed) {
                setTimeout(() => {
                    const tooltip = document.createElement('div');
                    tooltip.classList.add('tooltip-speaksdata');
                    tooltip.innerHTML = `
                        <span>Ich bin der Speaksdata Assistent!<br>Ich helfe Ihnen bei Fragen!</span>
                        <button class="close-tooltip">&times;</button>
                    `;
    
                    document.body.appendChild(tooltip);
    
                    // Tooltip schließen
                    document.querySelector('.close-tooltip').addEventListener('click', function() {
                        tooltip.style.animation = 'fadeOut 0.5s forwards';
                        setCookie('tooltipClosed', 'true', 365);
                    });
                }, 5000); // Tooltip erscheint nach 5 Sekunden
            }
    
            // Hilfsfunktionen zum Verwalten von Elementen
            function updateOrCreateElement(id, tag, parent, content = '') {
                let element = document.getElementById(id);
                if (!element) {
                    element = document.createElement(tag);
                    element.id = id;
                    element.style.display = 'none';
                    parent.appendChild(element);
                }
                element.textContent = content;
                return element;
            }
    
            // Funktionen zur Feature-Erkennung für iOS und Safari
            function isIos() {
                return /iPhone|iPad|iPod/.test(navigator.userAgent);
            }
    
            function isSafari() {
                return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
            }
    
            // Funktion zur Anzeige eines Modals zur Bestätigung der Audiowiedergabe
            function showAudioConsentModal(audioUrl) {
                const modal = document.createElement('div');
                modal.style.position = 'fixed';
                modal.style.top = '50%';
                modal.style.left = '50%';
                modal.style.transform = 'translate(-50%, -50%)';
                modal.style.padding = '20px';
                modal.style.backgroundColor = 'white';
                modal.style.border = '1px solid black';
                modal.style.zIndex = '10000';
                modal.innerHTML = `
                    <p>Möchten Sie die Antwort anhören?</p>
                    <button id="playAudioButton">Ja</button>
                    <button id="cancelButton">Nein</button>
                `;
                document.body.appendChild(modal);
    
                document.getElementById('playAudioButton').addEventListener('click', () => {
                    const audio = new Audio(audioUrl);
                    audio.play().catch(error => {
                        console.error('Audio playback failed:', error);
                    });
                    modal.remove();
                });
    
                document.getElementById('cancelButton').addEventListener('click', () => {
                    modal.remove();
                });
            }
    
            micButtonCheckbox.addEventListener('change', () => {
                if (micButtonCheckbox.checked) {
                    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
                    recognition.lang = 'de-DE';
    
                    const resetButtonIcon = () => {
                        buttonIcon.src = defaultIconBase64;
                    };
    
                    recognition.onresult = async (event) => {
                        if (event.results.length > 0) {
                            const text = event.results[0][0].transcript;
    
                            // Verwende updateOrCreateElement, um das Gesprochen-Text-Element zu aktualisieren oder zu erstellen
                            const spokenTextElement = updateOrCreateElement('spokenText', 'p', document.body, `Gesprochen: ${text}`);
    
                            recognition.stop();
                            micButtonCheckbox.checked = false;
    
                            // Lade-Icon sofort anzeigen, nachdem die Spracherkennung beendet ist
                            buttonIcon.src = loadingIconBase64;
    
                            try {
                                const response = await fetch('https://www.speaksdata.com/query.php', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json'
                                    },
                                    body: JSON.stringify({
                                        query: text,
                                        user_id: userId
                                    })
                                });
    
                                if (!response.ok) {
                                    throw new Error(`HTTP error! status: ${response.status}`);
                                }
    
                                const result = await response.json();
    
                                // Verwende updateOrCreateElement, um das Antwort-Text-Element zu aktualisieren oder zu erstellen
                                const responseTextElement = updateOrCreateElement('responseText', 'p', document.body, `Antwort: ${result.answer}`);
    
                                buttonIcon.src = successIconBase64;
    
                                if (result.audio_base64) {
                                    const audioBlob = new Blob([Uint8Array.from(atob(result.audio_base64), c => c.charCodeAt(0))], { type: 'audio/mp3' });
                                    const audioUrl = URL.createObjectURL(audioBlob);
    
                                    if (isIos() || isSafari()) {
                                        showAudioConsentModal(audioUrl);
                                    } else {
                                        const audio = new Audio(audioUrl);
                                        audio.play().catch(error => {
                                            console.error('Audio playback failed:', error);
                                        });
    
                                        audio.onended = () => {
                                            URL.revokeObjectURL(audioUrl);
                                            resetButtonIcon(); // Zurücksetzen auf das Standard-Icon nach Audiowiedergabe
                                        };
                                    }
                                } else {
                                    const utterance = new SpeechSynthesisUtterance(result.answer);
                                    window.speechSynthesis.speak(utterance);
    
                                    utterance.onend = resetButtonIcon; // Zurücksetzen auf das Standard-Icon nach Text-to-Speech
                                }
                            } catch (error) {
                                // Verwende updateOrCreateElement, um das Fehler-Text-Element zu aktualisieren oder zu erstellen
                                const responseTextElement = updateOrCreateElement('responseText', 'p', document.body, `Fehler bei der Anfrage: ${error.message}`);
    
                                buttonIcon.src = errorIconBase64;
    
                                const utterance = new SpeechSynthesisUtterance("Ein Fehler ist aufgetreten");
                                utterance.onerror = (e) => {
                                    console.error('TTS Error:', e);
    
                                    alert("Ein Fehler ist aufgetreten");
                                };
                                window.speechSynthesis.speak(utterance);
    
                                // Icon auf Standard-Icon zurücksetzen, nachdem die Fehlermeldung abgeschlossen ist
                                utterance.onend = resetButtonIcon;
                            }
                        } else {
                            micButtonCheckbox.checked = false;
                            recognition.stop();
                        }
                    };
    
                    recognition.onerror = (event) => {
                        const responseTextElement = updateOrCreateElement('responseText', 'p', document.body, `Spracherkennungsfehler: ${event.error}`);
    
                        micButtonCheckbox.checked = false;
                        recognition.stop();
                        buttonIcon.src = errorIconBase64;
    
                        const utterance = new SpeechSynthesisUtterance("Ein Fehler ist aufgetreten");
                        utterance.onerror = (e) => {
                            console.error('TTS Error:', e);
                            alert("Ein Fehler ist aufgetreten");
                        };
                        window.speechSynthesis.speak(utterance);
    
                        // Icon auf Standard-Icon zurücksetzen, nachdem die Fehlermeldung abgeschlossen ist
                        utterance.onend = resetButtonIcon;
                    };
    
                    recognition.onspeechend = () => {
                        recognition.stop();
                        micButtonCheckbox.checked = false;
                        buttonIcon.src = loadingIconBase64; // Lade-Icon wird sofort nach Ende der Spracherkennung angezeigt
                    };
    
                    recognition.start();
                }
            });
        });
    })();

I do not have a mac or Iphone myself and recordnized it by a friend, hope someone can help me with this problem.

If a website will be needed i will also provide this to find the failure and set this script up.

Regards and thanks, Phil

I wanted to get an voice driven answer from the script everytime i asked i tried several userinteractions but nothing worked.

I need to add +1 to each card clicked but

Function result 3 as undefined why?
what is wrong with my code?

card2 and card3 function recive each variable inside each click function

inside function click2 setcard(card2); click3 setcard(card3); and so on

For some reason it do not work.

var card2 = 0;
var card3 = 0;

function setcard(card2, card3){
    document.getElementById("truecount").innerHTML = card2 + card3;
    
    } 

//functions

function clickplus2() {
        resultado += 2;
        zen += 2;
        cartas +=1;
        valor +=2;
        zenok +=11;
        
        card2 +=1;
        setresultado(resultado, zen, cartas, valor, zenok);
        setcard(card2);     
       
    }
    function clickplus3() {
        resultado += 3;
        zen += 2;
        cartas +=1;
        valor +=3;
        zenok +=10;
        
        card3 +=1;
        setresultado(resultado, zen, cartas, valor, zenok);  
        setcard(card3); 
}```

well, i have just started learning js and ts for game development and am following a video course on the same. I have successfully specified an object and added it to the gamescreen. The object is interactive and i can change its alpha by clicking on it. But after adding the necessary phaser physics modules and references, the object simply disappears from the screen.

I was expecting the game object to move in the directions specified in the update function. Here are my code, its not in its original shape as i Have done some trial and error. But the problem remains- whenever i try to add some physics related code, the gameobject simply disappears from the game screen.
Game.ts

<code>
import 'phaser'



import PreloadScene from './scenes/preloadScene'
import MainScene from './scenes/mainScene'

export const GameScreen = {
    width: 800,
    height: 600,
  };
  

const config = {
    type: Phaser.AUTO,
    backgroundColor: "#ffffe0",
    scale:{
        parent: 'phaser-game',
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: GameScreen.width,
        height: GameScreen.height
    },
    scene:[PreloadScene,MainScene],

    Physics:{
        default: 'arcade',  
        arcade:{
            debug:true,
            gravity:{y:200}
        }
       
    
    }
}
window.addEventListener('load', () => {
    const game = new Phaser.Game(config)
    
})
<code>

<code>

import Rocket from "../objects/rocket"; 
export default class MainScene extends Phaser.Scene{

    rocket: Rocket
    constructor(){
        super({
            key: 'MainScene'
        })
    }
    create(){
       this.rocket= new Rocket(this, this.cameras.main.width/2, this.cameras.main.height/2)
       //this.rocket.body.velocity.x +=3;
    }

    /*update(time: number, delta:number): void{
        this.rocket.body.velocity.x +=3;
       // this.rocket.body.velocity.y (3);
    }*/

}
<code>

export default class Rocket extends Phaser.Physics.Arcade.Sprite{

constructor(scene, x,y){
    super(scene, x, y, 'rocket')

    scene.add.existing(this)
    
    

    this.setInteractive().on('pointerdown',() =>  {
           this.alpha= 0.5})
        
    }
    
    
    
    
}

<script setup>
import {useFormStore} from '../stores/formStore';
import {storeToRefs} from 'pinia';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import Button from 'primevue/button';

const formStore = useFormStore();
const {formDataArray} = storeToRefs(formStore);

const handleButtonClick = (rowData) => {

    const index = formDataArray.value.findIndex((item) => item.id === rowData.id);
    formDataArray.splice(index, 1)
  

};

</script>

<template>
  <div class="card">
    <DataTable :value="formDataArray" table-style="min-width: 50rem">
      <Column field="id" header="ID"></Column>
      <Column field="description" header="Description"></Column>
      <Column field="amount" header="Amount"></Column>
      <Column field="category" header="Category"></Column>
      <Column header="Actions">
        <template #body="slotProps">
          <Button
              label="Delete"
              @click="handleButtonClick(slotProps.rowData)"
          />
        </template>
      </Column>
    </DataTable>

    <DataTable>

    </DataTable>
  </div>
  <p>{{formDataArray.length}}</p>
</template>

<style scoped>
</style>

I m trying to delete a particular row from the Data Table it is not possible as I am getting error that the row data does not exiss primevue Data Tables render on coloumn basis. I am using Pinia for state management