Verwandte Themen

SohnSchais
09.04.2023, 13:39
JS - Warum funktioniert der Button nicht Richtig?

Ich wollte ein simples Spiel mit JS programmieren und wollte einen Refresh des Bildschirms einfügen. An sich funktioniert das auch, jedoch reagiert der Button nicht immer. Je schneller der Refresh erfolgt, desto schlechter Funktioniert der Button. Kann mir da vielleicht jemand helfen?

<!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>Document</title>
    <link href="miner.css" rel="stylesheet">
    <script src="miner.js"></script>
</head>
<body>
    <div class="monitor" id="monitor">
        <h1>Mine Tycoon</h1>
        <div>Mines: <font id="minesCounter">0</font></div><br>
        <div id="buyMineButton">
            <p class="button" onclick="buyMine()">Buy mine Cost: <font id="minesPrice">1</font></p>
        </div>
    </div>
</body>
</html>

body{
    background-color: #393939;
    color: #ffffff;
}


h1{
    text-align: center;
}


.button{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid red;
    outline-offset: 4px;
    text-align: center;
}
.buttonGreen{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid green;
    outline-offset: 4px;
    text-align: center;
}

var money = 100;


var mines = 0;
var minesPrice = 1;
var miners = 0;


var coal = 0;
var copper = 0;
var iron = 0;
var cobalt = 0;
var gold = 0;
var platinum = 0;
var diamond = 0;


var reload = 10;


function buyMine(){
    mines++;
    money -= minesPrice;
    minesPrice = minesPrice*2;
}


function loop(){
    
        setInterval(function(){
            refreshScreen();
        },1000/reload)
    
}


function refreshScreen(){
    minesCounter.innerHTML = mines;
    if(money < minesPrice){
        document.getElementById("buyMineButton").innerHTML = "<p class='button'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }else{
        document.getElementById("buyMineButton").innerHTML = "<p class='buttonGreen' onclick='buyMine()'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }
    document.getElementById("minesPrice").innerHTML = minesPrice;
}


loop();
HTML, CSS, JavaScript
1 Antwort
Kugelfisch647
08.04.2023, 20:08
Electron Datei Öffnen und Inhalt in Script übergeben?

Ich möchte in meinem Electron Programm im Menü die Möglichkeit bieten eine Datei zu öffnen. Die Datei enthält JSON. Ich möchte den Inhalt dann in meinem Script weiterverarbeiten um ihn anzuzeigen. Das ist mein Code bis jetzt:

main.js

const { app, BrowserWindow, Menu } = require('electron');
const { mainMenu } = require('./menu');
const path = require('path');


const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    });


    Menu.setApplicationMenu(mainMenu);


    mainWindow.loadFile(path.join(__dirname, "src/index.html"));
};


app.whenReady().then(() => {
    createWindow();


    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});


app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

menu.js

const { app, Menu, dialog } = require('electron');
const fs = require('fs');


const template = [
    {
        label: 'Datei',
        submenu: [
            {
                label: 'Öffnen',
                accelerator: 'CmdOrCtrl+O',
                click: async () => {
                    const files = await dialog.showOpenDialog({
                        properties: ['openFile'],
                        filters: [
                            { name: 'Json', extensions: ['json'] },
                            { name: 'Alle Dateien', extensions: ['*'] }
                        ]
                    });


                    if (!files || files.canceled || files.filePaths.length === 0) return


                    const file = files.filePaths[0];
                    const fileContent = fs.readFileSync(file, 'utf-8');
                    console.log(fileContent);
                }
            }
        ]
    }
]


module.exports.mainMenu = Menu.buildFromTemplate(template);

index.html (src/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>Document</title>
</head>
<body>
    <h1>Seite</h1>
    <script>
        console.log(data);
    </script>
</body>
</html>

Wie kann ich das umsetzten? Ich habe schon von IPC gelesen, es aber nicht wirklich verstanden.

Windows, Programm, HTML, JavaScript, Programmiersprache, node.js
1 Antwort
ITgirlde
31.03.2023, 08:26
Mit Links
Mit Umfrage
Wie habt ihr Programmieren gelernt oder würdet es tun?

Die Frage richtet sich an Menschen, die nicht Informatik studiert haben, oder davor schon programmieren konnten. Wie habt ihr Programmieren gelernt oder würdet es angehen, wenn ihr euch jetzt dafür entscheiden würdet?

1. Durch das Lesen von Büchern und Tutorials: Eine Möglichkeit Programmieren zu lernen, ist durch das Studium von Büchern und Online-Tutorials (lesen). Indem man die Theorie und Beispiele lernt, kann man grundlegende Kenntnisse erwerben.

2. Durch das Anschauen von Online-Kursen und -Videos: Man kann auch Online-Kurse und -Videos ansehen, um Programmiersprachen und -konzepte zu erlernen. Durch das Ansehen von Videos kann man Konzepte besser verstehen und den Experten beim Programmieren über die Schulter schauen. Dazu gibt es ja auch kostenloses Material auf Youtube oder günstiges auf Udemy.

3. Mit einem Spiel: Eine unterhaltsame Möglichkeit, Programmierung zu erlernen, ist durch das Spielen von Spielen, die speziell dafür entwickelt wurden, Programmierfähigkeiten zu vermitteln. Da gibt es auch gute kostenlose Angebote. Ein Beispiel ist Scriptfighter, bei dem man Javascript lernt, indem man seinen Code gegen den Standardcode oder den Code eines anderen Spielers antreten lässt. Dieser wird dann von der Figur ausgeführt.Mit solchen Spielen kann man spielerisch Kenntnisse erwerben und seine Fähigkeiten vertiefen.

4. Einen Kurs besuchen: Eine weitere Möglichkeit, Programmierung zu erlernen, ist durch den Besuch von Kursen. der Vorteil hier wäre definitiv, dass man Fragen stellen kann und an praktischen Übungen teilnimmt. Kurse sind eine gute Möglichkeit, gezielt Kenntnisse in einer Programmiersprache oder einem Konzept zu erwerben und eine strukturierte Herangehensweise an das Lernen zu bekommen. Dafür muss man hierfür tiefer in die Tasche greifen.

Durch das Lesen von Büchern und Tutorials (lesen) 67%
Einen Kurs besuchen 17%
Durch das Anschauen von Online-Kursen und -Videos 13%
Mit einem Spiel 4%
HTML, programmieren, Java, JavaScript, Programmiersprache, Python
11 Antworten
A2022
24.03.2023, 19:17
Wie kann ich JavaScript-Code in Processing-Code umschreiben?

Hallo,

also ist es möglich, einen Java-Code in einen Processing-Code umzuschreiben oder besser gesagt, könnte jemand helfen? Ich bin noch sehr am Anfang, habe aber einen Code gefunden, der mir sehr gut gefällt und mit dem ich gerne ein bisschen herumprobieren würde. Nur funktioniert er eben in Processing nicht und mit Java kenne ich mich noch weniger aus, darum würde ich ihn gerne umschreiben.

So sieht das Ganze aus:

let shapes = [];
let colors = ["#ffc857", "#e9724c", "#c5283d", "#481d24", "#255f85", "#a5bccc"];

function setup() {
  createCanvas(1000, 800);
  rectMode(CENTER);
  translate(width / 2, height / 2);
  scale(1.4);
  rotate(random(PI));
  translate(-width / 2, -height / 2);
  background(random(colors));
  let seg = int(random(25, 45));
  let w = width / seg;

  for (let i = 0; i < seg; i++) {
    for (let j = 0; j < seg; j++) {
      let x = i * w;
      let y = j * w;

      if ((i + j) % 2 == 0) {
        shapes.push(createVector(x + w / 2, y + w / 2, w * 2.01));
      }
    }
  }

  shuffle(shapes, true)
  noStroke();

  for (let s of shapes) {
    let rnd = int(random(4));
    shuffle(colors, true);
    push();
    translate(s.x, s.y);
    fill(random(colors));

    if (rnd == 0)
      circle(0, 0, s.z);
    else if (rnd == 1)
      square(0, 0, s.z);
    else if (rnd == 2) {
      let n = int(random(1, 5));
      
      for (let i = 0; i < n; i++) {
        let ss = map(i, 0, n, s.z, 0);
        fill(colors[i]);
        circle(0, 0, ss);
      }
    }
    else if (rnd == 3) {
      let n = int(random(1, 10));

      for (let i = 0; i < n; i++) {
        let ss = map(i, 0, n, s.z, 0);
        fill(colors[i % colors.length]);
        square(0, 0, ss);
      }
    }

    pop();
  }
}

function draw() {
}
JavaScript, Processing, Programmiersprache
1 Antwort
FrozenArmy
19.03.2023, 13:26
Frage wurde 1 Mal erneut gestellt
JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

Computer, Technik, HTML, Webseite, programmieren, JavaScript, Click, HTML5, Entwicklung, Programmiersprache, Technologie, Webentwicklung, Entwicklungsumgebung
1 Antwort
Computerneu1357
01.03.2023, 09:55
Mit Bildern
Mit Links
JavaScript: fetch API Fehler - Anfrage wegen CORS blockiert?

Hi,

ein Freund von mir ist großer Fan von dem Format "Barsch'sche Filosofie", das auf SWR3 läuft. Es ist aber etwas umständlich, sich auf deren Seite durch die ganzen Witze durchzuklicken, vor allem, weil man so nicht sieht, was alles drin ist.

Ich habe erst vor ein paar Wochen begonnen, JavaScript richtig zu lernen und dachte mir, zu Übungszwecken probiere ich mal, damit eine Auflistung mit allen Witzen zu ermöglichen.

Essentiell hierbei ist für mich, dass mit jedem Seitenaufruf meines HTML-Dokuments die Filosofie-Webseite "abgefragt" wird (simples GET-Request), damit auch neue Sachen beim abrufen mit dabei sind, wenn die SWR-Redaktion neue einstellt. Das mache ich mit fetch(). Es funktioniert auch alles soweit super, es gibt nur ein Problem:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://www.swr3.de/comedy/barschsche-filosofie-100.html. (Grund: CORS-Anfrage war nicht http).

Mit CORS habe ich mich bislang noch nicht wirklich auseinandergesetzt, aber laut mdn liegt es an einem fehlenden Header in der Server-Response? Auf die hab ich in diesem Fall wohl keinen großen Einfluss...

Wenn ich schreibe, dass alles soweit super funktioniert, dann meine ich damit, dass es manchmal geht, manchmal aber nicht. In letzterem Fall bekomme ich diese Fehlermeldung. Das versuche ich momentan zu beheben. Kann mir jemand weiterhelfen?

Bild zum Beitrag
Webseite, programmieren, JavaScript, Webentwicklung
1 Antwort

Meistgelesene Fragen zum Thema JavaScript
Mehr meistgelesene Fragen zu JavaScript