JavaScript will nicht (Text in Element ändern per onclick)?

Hallo alle miteinander,

ich tüftle derzeit daran, den Text eines Elements zu ändern, sobald im unteren Menü ein Feld angeklickt wurde. Das Ganze funktioniert jedoch nicht und ich verstehe nicht wirklich warum. Könnt ihr mir helfen den Fehler zu finden?

Die wli-Variablen sollen den neuen Text enthalten, da ich das für jemanden programmiere, der keine Ahnung von JavaScript hat und ich es somit vereinfachen wollte, das er den Text ohne etwas kaputt zu machen, bearbeiten kann.

Hier einmal der Code, an dem ich herumprobiert habe. Allerdings ohne den CSS-Teil:

<script type="text/javascript">
  wli1 = "wli1";
  wli2 = "wli2";
  wli3 = "wli3";
  wli4 = "wli4";
  wli5 = "wli5";
  wli6 = "wli6";

  function fwli1() {
    document.getElementById("werdegangcon").value = wli1;
  }

  function fwli2() {
    document.getElementById("werdegangcon").value = wli2;
  }

  function fwli3() {
    document.getElementById("werdegangcon").value = wli3;
  }

  function fwli4() {
    document.getElementById("werdegangcon").value = wli4;
  }

  function fwli5() {
    document.getElementById("werdegangcon").value = wli5;
  }

  function fwli6() {
    document.getElementById("werdegangcon").value = wli6;
  }
</script>
<div class="conh15">
  <div class="con100">
    <div class="con_top center nummer">
      <h3>Werdegang</h3>
    </div>
    <div class="con_mid center" id="werdegangcon">
      2394    Abschluss des Abiturs mit Auszeichnung</br>
      2394    Job als Haustechnikerin
    </div>
    <div class="con_bot center">
      <ul class="werdegang">
        <li id="weli1" onclick="fwli1()">vor der Akademie</li>
        <li id="weli2" onclick="fwli2()">2395</li>
        <li id="weli3"onclick="fwli3()">2399</li>
        <li id="weli4"onclick="fwli4()">2401</li>
        <li id="weli5"onclick="fwli5()">2402</li>
        <li id="weli6" onclick="fwli6()">2403</li>
      </ul>
    </div>
  </div>
</div>
HTML, programmieren, JavaScript
Handy rechner Javascript?

Hallo, ich habe folgenden code:

<!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>Calculator</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Fascinate&family=Poppins:ital,wght@1,200&family=Red+Hat+Mono:wght@300&family=Roboto&display=swap" rel="stylesheet">

<link rel="stylesheet" href="style.css">

<link rel="manifest" href="manifest.webmanifest">

<style>

</style>

<script>

function appendOperation(operation){

    document.getElementById("resultArea").innerHTML += operation;

}

function calculateResult() {

    let container = document.getElementById("resultArea");

    let result = eval(container.innerHTML);

    container.innerHTML = result;

}

function deleteLast() {

    let container = document.getElementById("resultArea");

    if (container.innerHTML.endsWith(' ')) {

        container.innerHTML = container.innerHTML.slice(0, -3);

    } else {

        container.innerHTML = container.innerHTML.slice(0, -1);

    }

   

}

    </script>

</head>

<body>

<div id="resultArea">

</div>

    <table>

        <tr>

        <td></td>

        <td></td>

        <td></td>

        <td onclick="deleteLast()">DEL</td>

       

        </tr>

<tr>

    <td onclick="appendOperation(7)">7</td>

    <td onclick="appendOperation(8)">8</td>

    <td onclick="appendOperation(9)">9</td>

    <td onclick="appendOperation(' / ')" class="highlight">/</td>

</tr>

<tr>

    <td onclick="appendOperation(6)">6</td>

    <td onclick="appendOperation(5)">5</td>

    <td onclick="appendOperation(4)">4</td>

    <td onclick="appendOperation(' * ')" class="highlight">*</td>

</tr>

<tr>

    <td onclick="appendOperation(1)">1</td>

    <td onclick="appendOperation(2)">2</td>

    <td onclick="appendOperation(3)">3</td>

    <td onclick="appendOperation(' + ')" class="highlight">+</td>

</tr>

<tr>

    <td onclick="appendOperation(0)">0</td>

    <td onclick="appendOperation('.')">.</td>

    <td onclick="calculateResult()" id="result">=</td>

    <td onclick="appendOperation(' - ')" class="highlight">-</td>

</tr>

    </table>

</body>

</html>

ICH KANN AUF DEM PC DAS = DRÜCKEN UND DEL DRÜCKEN, ALSO ZUM LÖSCHEN:

ABER AUF DEM HANDY KANN ICH NICHT = UND DEL DRÜCKEN, WORAN KANN DAS LIEGEN?

ICH NUTZE ANDROID MIT CHROME:

LG

programmieren, JavaScript
Node JS / Npm Fehlermeldung?

Ich wollte Robot JS installieren mit Windows (Unter Linux klappt alles super )

jedoch tritt diese Fehlermeldung auf und ich habe schon viel versucht.

Nichts hilft. https://pastebin.com/1VfKGnXx

Habe auch beim installieren von NodeJS darauf geachtet das es diese Python/C++ Pakete oder so mit installiert.

PS C:\Users\maxmustermann\Desktop\robotjs> npm install robotjs

Es installiert kurz Robot Js und dann löscht es sich wieder und dann erscheint das

Part 1:

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code 1
npm ERR! path C:\Users\maxmustermann\Desktop\robotjs\node_modules\robotjs
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c prebuild-install || node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@9.0.0
npm ERR! gyp info using node@18.3.0 | win32 | x64
npm ERR! gyp info find Python using Python version 3.10.5 found at "C:\Users\maxmustermann\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\python.exe"
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS checking VS2022 (17.2.32602.215) found at:
npm ERR! gyp ERR! find VS "C:\Program Files\Microsoft Visual Studio\2022\Community"
npm ERR! gyp ERR! find VS - found "Visual Studio C++ core features"
npm ERR! gyp ERR! find VS - missing any VC++ toolset
npm ERR! gyp ERR! find VS checking VS2019 (16.11.32602.291) found at:
npm ERR! gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools"
npm ERR! gyp ERR! find VS - found "Visual Studio C++ core features"
npm ERR! gyp ERR! find VS - missing any VC++ toolset
npm ERR! gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS

Die ganze Fehlermeldung passt hier nicht rein.

PC, Computer, Software, Technik, programmieren, JavaScript, Informatik, npm
HTML Form auswerten und neue Füllen?

Hey!

Ich habe folgende Input form:

        <form action="/calculate" method="GET">
            <br><label for="KM_cost_truck_a">KM cost truck a</label>
            <input required placeholder="10" ype="text" id="KM_cost_truck_a" name="KM_cost_truck_a"><br>
    
            <label for="KM_cost_truck_b">KM cost truck b</label>
            <input required placeholder="9" type="text" id="KM_cost_truck_b" name="KM_cost_truck_b"><br>
    
            <label for="Product_cost_a">Product cost a</label>
            <input required placeholder="7" type="text" id="Product_cost_a" name="Product_cost_a"><br>
    
            <label for="Product_cost_b">Product cost b</label>
            <input required placeholder="11" type="text" id="Product_cost_b" name="Product_cost_b"><br>
    
            <label for="Source_a_location">Source a location</label>
            <input required placeholder="Berlin" type="text" id="Source_a_location" name="Source_a_location"><br>
    
            <label for="Source_b_location">Source b location</label>
            <input required placeholder="Paris" type="text" id="Source_b_location" name="Source_b_location"><br>
    
            <label for="Truck_a_capacity">Source a capacity</label>
            <input required placeholder="5" type="text" id="Truck_a_capacity" name="Truck_a_capacity"><br>
    
            <label for="Truck_b_capacity">Source b capacity</label>
            <input required placeholder="3" type="text" id="Truck_b_capacity" name="Truck_b_capacity"><br>


            <button type="submit" id="calcbtn" value="Submit">Calculate</button>
        </form>

Die eine Anfrage an meinen Server schickt und die ergebnisse dann auf eine neue Seite kommen. (Man wirt weitergeleitet)

Wie kann ich eine neue form mit der Antwort vom server füllen?

HTML, JavaScript, Webentwicklung
Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>
Computer, Homepage, HTML, IT, Webseite, programmieren, CSS, JavaScript, Webdesign, Webentwicklung

Meistgelesene Beiträge zum Thema JavaScript