JavaScript – die besten Beiträge

Verwandte Themen
johndont
19.07.2024, 17:22
Mit Bildern

Bash Script um DNS umzustellen?

Habe einmal ein Bash Script und eine .Desktop Verknüpfungen auf meinem Arch KDE und wollte bei Doppelklick auf die Verknüpfungen zb Updaten oder DNS auf 8.8.8.8 oderr Automatisch Umstellen.

(Ich kann auch via KDE Connect das ganze Starten und ohne EIngabe abschließen mit sudo pacman -Syu --noconfirm && yay -Syu --noconfirm)

Aber bei toggle_dns funktioniert das leider nicht mit dem gelieferten Code von ChatGPT (siehe Unten) und ich kann garkein Bash, nur "normale" programmiersprachen wie JavaScript oder PHP. Mit Python würde ich es vielleicht hinkriegen aber das ist doch viel aufwendiger jetzt die IDE erneut zu installieren als mit Bash.

Wenn es das gibt wollte ich eine KDE eigene Benachrichtigung in welchen Modus es jetzt gewechselt ist zb : DNS auf Automatisch umgestellt oder DNS auf 8.8.8.8 Umgestellt statt ein Terminal was ich dann noch per hand schließen muss.
Kann mir jemand weiterhelfen den Code zu reparieren ?

toggle_dns.sh :

#!/bin/bash

# Datei und Schnittstelle für die DNS-Konfiguration
RESOLV_CONF="/etc/resolv.conf"
INTERFACE="Netzwerkschnittstelle_von_euch"

# Funktion zum Setzen des DNS-Servers auf 8.8.8.8
set_dns() {
  echo -e "nameserver 8.8.8.8\noptions edns0" | sudo tee $RESOLV_CONF > /dev/null
  sudo systemctl restart NetworkManager
  notify "DNS wurde auf 8.8.8.8 gesetzt."
}

# Funktion zum Zurücksetzen des DNS-Servers auf automatisch
reset_dns() {
  sudo rm -f $RESOLV_CONF
  sudo systemctl restart NetworkManager
  notify "DNS wurde auf automatisch gesetzt."
}

# Funktion zum Senden einer KDE-Benachrichtigung
notify() {
  message=$1
  kdialog --passivepopup "$message" 5
}

# Überprüfen, ob der DNS-Server bereits auf 8.8.8.8 gesetzt ist
if grep -q "8.8.8.8" $RESOLV_CONF; then
  echo "DNS ist derzeit auf 8.8.8.8 gesetzt. Umschalten auf automatisch."
  reset_dns
else
  echo "DNS ist derzeit automatisch konfiguriert. Umschalten auf 8.8.8.8."
  set_dns
fi

Bild zum Beitrag
PC, Server, Computer, Internet, Windows, WLAN, Technik, Linux, IT, programmieren, Java, JavaScript, Ubuntu, Cplusplus, Bash, C Sharp, DNS, Gnome, Informatik, KDE, Programmiersprache, Python, Script, Shell, Arch Linux, Rust, Debian, PowerShell, KDE Plasma, node
2 Antworten
jovetrojo
10.07.2024, 16:55

JavaScript Preis Calculator?

document.addEventListener('DOMContentLoaded', function() {
    const slider = document.getElementById('diskspace');
    const hiddenValue = document.getElementById('initialDiskspace');
    const demo = document.getElementById('demo');
    const selectedValue = document.getElementById('diskspaceOutput');
    const selectedPrice = document.getElementById('priceOutput');
    const initialDiskspaceValue = parseInt(new URLSearchParams(window.location.search).get('value')) || 0;

    // Setze den initialen Speicherplatz
    hiddenValue.value = initialDiskspaceValue;

    // Variable für den aktuellen Preis
    let currentPrice = 10; // Startpreis

    // Funktion zur Berechnung des Preises
    const calculatePrice = (value) => {
        // Grundpreise
        const basePrice = 10; // Grundpreis für den Server
        const pricePerGB = 1; // Preis pro GB Speicher
        const pricePerCPU = 1; // Preis pro CPU-Kern

        // Eingabewerte holen
        const diskspace = parseInt(value); // Speicherplatz in GB
        const cpuCores = parseInt(document.getElementById('cpu').value); // Anzahl der CPU-Kerne
        const os = document.getElementById('os').value; // Betriebssystem

        // Betriebssystem-Aufschläge (hier Beispiel, wie man unterschiedliche Preise je nach Betriebssystem anwenden könnte)
        let osPrice = 0;
        if (os === 'windows') {
            osPrice = 5; // Beispiel: Windows ist teurer
        } else if (os === 'macos') {
            osPrice = 10; // Beispiel: macOS ist noch teurer
        }

        // Berechne den Gesamtpreis
        const totalPrice = basePrice + (diskspace * pricePerGB) + (cpuCores * pricePerCPU) + osPrice;

        // Aktualisiere den angezeigten Preis
        selectedPrice.innerText = `Gesamtpreis: ${totalPrice.toFixed(2)} €`;

        return totalPrice;
    };

    // Setze den initialen Wert und Preis
    selectedValue.innerText = slider.value;
    calculatePrice(parseInt(slider.value));

    // Event Listener für Änderungen am Slider
    slider.oninput = function() {
        selectedValue.innerText = this.value;
        calculatePrice(parseInt(this.value));
    };

    // Formularabsenden mit verstecktem Wert und Preis
    const form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        hiddenValue.value = slider.value;
        this.submit();
    });
});

Hey das ist der Code uns er funktioniet nicht also nicht ganz richtig. Die rechnung ist falsch undzwar klappt nicht das 1GB Festplatte = 1€, 1GB Ram = 1€ und 1 Kern = 1€. und das dann einfach addiert wird das funktioniert nicht kann wer helfen? Es ust eine Website

Webseite, JavaScript, Programmiersprache
1 Antwort
Nadine0006
09.07.2024, 08:58

Code funktioniert leider nicht?

Hallo!

Mein Code bekommt immer wieder eine Fehlermeldung, oder er funktioniert einfach nicht.

function showPasswordModal(route, userName) {
console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
$('#passwordModal').modal('show');
$('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
$('#passwordForm').data('userName', userName);
}
function validatePassword() {
console.log('validatePassword() wurde aufgerufen');
var enteredPassword = document.getElementById('passwordInput').value;
var userName = $('#passwordForm').data('userName');
var form = document.createElement('form');
form.method = 'POST';
form.action = "{{ route('admin.validatePassword', ['userName' => ':userName']) }}".replace(':userName', userName);
var csrfInput = document.createElement('input');
csrfInput.type = 'hidden';
csrfInput.name = '_token';
csrfInput.value = '{{ csrf_token() }}';
form.appendChild(csrfInput);
var passwordInput = document.createElement('input');
passwordInput.type = 'hidden';
passwordInput.name = 'password';
passwordInput.value = enteredPassword;
form.appendChild(passwordInput);
document.body.appendChild(form);
form.submit();

wenn auf den pay-button gedrückt wird, erscheint ein passwortfeld indem ein benutzerdefiniertes Passwort eingegeben werden soll. Diese Passwörter sind in einer Tabelle gespeichert. überprüft wird in diesen zwei methoden doch debuggen funktioniert irgendwie nicht und die variablen sind normalerweise richtig befüllt.? Weiß vllt irgendwer eine Lösung????? Danke im Vorraus.

HTML, JavaScript, PHP
1 Antwort
MrNobody212
07.07.2024, 14:27

Wie kann ich meinen Fehler beheben?

Hallo,

ich habe ein Problem mit meinem Code. Meine Simulation eines kleinen Roulette Spiels funktioniert nicht . Wenn man zwei mal auf eine Farbe wettet gewinnt man ab dem zweiten mal immer auch wenn man verlieren müsste. Man bekomt drotzdem Geld zugeschrieben die erste Runde funktioniert aber.

Ich bin noch am Anfang mit dem Programmieren und arbeite mit studio.code.org.

Der Code:

onEvent("btn_Roulette_drehen", "click", function() {
 var wettbetrag_roulette = getText("tinput_wettbetrag");
 if (wettbetrag_roulette > points || 0 >= wettbetrag_roulette) {
  wettbetrag_roulette = -1;
  setText("lbl_status_r.", "Du hast zu viel oder garnichst gewettet!");
  setText("tinput_wettbetrag", "");
 } else if ((points >= wettbetrag_roulette)) {
  if (getText("dr_user_game_color") !== "Keine" || getText("dr_user_game_number") !== "Keine") {
   if (getText("dr_user_game_color") != "Keine" && getText("dr_user_game_number") != "Keine") {
    setText("lbl_status_r.", "Nur eine Sache Wetten!");
   } else {
    setText("lbl_status_r.", "Dreht");
    user_number_game_input = getText("dr_user_game_number");
    user_color_game_input = getText("dr_user_game_color");
    var roulette_gewinnzahl = randomNumber(1, 36);
    var rote_zahlen = [1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36];
    var ist_rot = false;
    for (var i = 1; i < rote_zahlen.length; i++) {
     if (roulette_gewinnzahl === rote_zahlen[i]) {
      ist_rot = true;
      roulette_gewinnfarbe = "rot";
      break;
     }
    }
    if (ist_rot) {
     setText("lbl_status_r.", "Es gewinnt rot und die Zahl " + roulette_gewinnzahl);
    } else {
     setText("lbl_status_r.", "Es gewinnt schwarz und die Zahl " + roulette_gewinnzahl);
    }
    if (roulette_gewinnfarbe != "rot") {
     roulette_gewinnfarbe = "schwarz";
    }
    if (roulette_gewinnzahl == user_number_game_input) {
     money = money +wettbetrag_roulette*36;
     points = points-wettbetrag_roulette;
      
      
      
      
      
     setText("lbl_status_r.", "Du hast gewonnen!!!!(" + roulette_gewinnzahl + roulette_gewinnfarbe +")");
     setText("lbl_money_counter", "Money:" + money);
     setText("lbl_score_counter", "Score" + points);
      
    } else if ((roulette_gewinnfarbe == user_color_game_input)) {
     points = points-wettbetrag_roulette;
     money = money + wettbetrag_roulette*2;
     setText("lbl_money_counter", "Money:" + money);
     setText("lbl_score_counter", "Score:" + points);
    } else {
     points = points-wettbetrag_roulette;
     setText("lbl_score_counter", "Score:" + points);
    }
   }
    
  } else {
   setText("lbl_status_r.", "Nichts ausgewählt!");
  }
 }
});
Fehler, Programm, JavaScript, Bug, Code
1 Antwort
kaysiebke
06.07.2024, 03:59
Mit Bildern

wie bekomme ich in google Docks Tabelle zwei button mit abstand nebneinander?

Hallo in die Runde und schon mal vielen Dank im Voraus in die Runde!

Ich bin noch blutiger Anfänger und fange gerade an mich mit dem HTML zu beschäftigen. Wie schon im Fragetitel beschrieben versuche ich zwei Buttons mit Abstand nebeneinander zu bekommen, aber es gelingt mir nicht so recht. Daher setze ich mal das, was ich habe, hier rein. Ich würde mich über jeden lehrreichen Tipp sehr freuen, um meinen Horizont in diesem Bereich zu erweitern

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
form {
    background-color: #fff;
    width: 250px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0px 0px rgba(1,2,0.1);
    margin
    width:auto !important;
}
    label {
    font-weight: bold;
    text-transform: uppercase;
}
    input[type="text"] {
    width: 250px;
    padding: 20px;
    margin-bottom: 9px;
    border: 1px outset #FF0000;
    border-radius: 10px;
    box-sizing: border-box;
}
    input[type="button"] {
    display: block;
    margin: 0 auto 12px auto;
    cursor: pointer;
    width: 190px;
    padding: 20px 2px;
    background-color: #FF0000;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 1px solid #FF0000;
    border-radius: 7px;
 
    transition: background 0.2s ease-out;
 
}
    input[type="button1"] {
    display: block;
    margin: 0 auto 7px auto;
    cursor: pointer;
    width: 140px;
    padding: 20px 2px;
    background-color: #FF0000;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 1px solid #FF0000;
    border-radius: 7px;
 
    transition: background 0.2s ease-out;
 
}
    input[type="button1"]:hover {
    background-color: #19911b;
}
 
    input[type="button"]:hover {
    background-color: #19911b;
}
 
</style>
</head>
<body>
<form id="itemForm">
<label for="sku">SKU:</label><br>
<input type="text" id="sku" name="sku"><br>
<label for="color">Color:</label><br>
<input type="text" id="color" name="color"><br>
<label for="size">Size:</label><br>
<input type="text" id="size" name="size"><br>
<label for="description">Description:</label><br>
<input type="text" id="description" name="description"><br><br>
<input type="button" value="Submit" onclick="submitForm()">
<input type="button1" value="Reset" onclick="form.reset()">
</form>
<script>
function submitForm() {
var form = document.getElementById('itemForm');
var formData = {
'sku': form.sku.value,
'color': form.color.value,
'size': form.size.value,
'description': form.description.value
};
google.script.run.processForm(formData);
}
</script>
</body>

</html>

Bild zum Beitrag
HTML, CSS, JavaScript, HTML5, Code, Programmiersprache
1 Antwort
JanMarcel01
04.07.2024, 19:54
Mit Links

NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

HTML, JavaScript, Framework, Webentwicklung, API, Frontend, React, node.js, TypeScript
1 Antwort
melisax795
03.07.2024, 11:19
Mit Bildern

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

Bild zum Beitrag
HTML, Webseite, JavaScript, Webentwicklung, React, node.js
2 Antworten
Moni98799
26.06.2024, 03:10
Mit Links

FEHLERSUCHE bei einem nicht mitscrollenden "Nach-Oben" Button?

Mehrere Stunden hat es mich heute schon beschäftigt, ich komme und komme nicht darauf...

Es geht mir um den seitlichen (rechts) "skip-to-top" Button. Exakt alles habe ich genauso wie in diesem Pen Beispiel ( Link: https://codepen.io/jackherizsmith/pen/oNxVWrK ) gemacht.

Aber bei mir scrollt der Nach-Oben Button nicht mit wie in dem Pen Beispiel :

Meine Demo-Seite: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__26-06-24.html (aktualisiert)

Allerdings habe ich mein position: relative nicht main mitgegeben sondern der id "skiptop". Mein Dev-Tool zeigt mir an, das jeweils relative und absolute richtig erkannt wird und es wird mir auch so gezeigt.

Nur halt die Klasse "scroll-top_link" scrollt nicht in dem Bereich hoch und runter wie es soll.

Was mache ich da falsch. Könnt ihr mir bei der Fehlersuche helfen?

Vieles habe ich ausprobiert, auch meinem main habe ich position relative gegeben, aber auch anderen Elementen setzte ich position relative allerdings ohne Effekt.

Das Ding ist allerdings das dieser seitliche Bereich ein eigenes grit-Element ist. Sprich:

.main-content-wrapper {
    display: grid;
    grid:     "main-head main-head" auto
            "navigations navigations" auto
            "main-content main-content" 1fr
            "main-footer main-footer" auto
          / minmax(0, auto) [main-nav-start] 5em [main-nav-end];
    }


#navigations {
    grid-area: navigations;    
    grid-column-end: main-nav;
}

#main-nav {
    grid-area: navigations / main-nav;
    position: relative;
    outline: thin solid red;
    margin: 0;
    padding: 0;
    z-index: 100;
}

Wo ich letztendlich das Hauptmenü anzeigen lasse, da habe ich noch keinen richtigen Plan.

Eventuell in der Zeile: #navigations und dann seitlich rechts.

Nicht zu verwechseln mit Seiten-Inhalt, das ist ein Seiten internes Sprungmenü zu einem bestimmten nach Datum geordneten Artikel. Bisher habe ich noch keine bessere Bezeichnung dafür gefunden. Irgendeine Idee dafür?

Zurück zum Hauptmenü, oder ich packe das Hauptmenü seitlich zum Nach-Oben Button, mache es ebenfalls sticky.

Was dann allerdings bei einem schmalen Browserfenster passiert?... Da habe ich eigentlich vor das Hauptmenü (oberhalb vom "Seiten-inhalt" Link) ohne Button (offen) untereinander anzuzeigen.

Sag mal bitte, da mir die Praxis fehlt, wie würdest Du es lösen?

Zurück zur eigentlichen Frage:

WICHTIG ist mir nun, warum der SCROLL-TOP Button nicht nach oben und unten mitscrollt wie er es eigentlich sollte.

Muss ich da was an der html-Struktur ändern. Ein zusätzliches div?

Ich habe da heute lange daran gesessen...

HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung, Visual Studio Code
3 Antworten

Meistgelesene Beiträge zum Thema JavaScript

Mehr meistgelesene Fragen zu JavaScript