jQuery Eingabe unten einfügen?

Ich soll einen Code schreiben, der die Eingabe nach dem drücken des Buttons unten auflistet (wie im Bild gezeigt). Kann mir jemand sagen was ich falsch gemacht habe?

Hier mein Code:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Praktikum Webanwendungen 1</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <style>
        h1{
            font-size: 50px;
        }


        div{
            float: left;
            margin: 10px;
        }


        .aufgabe{
            font-weight: bold;
            font-size: larger;
        }
       
        .liste{
            border: solid black;
        }
    </style>
    <body>
        <h1>Todo Liste</h1>
        <div class="aufgabe">Aufgabe:</div>
        <div class="eingabe"> <input type="text"> </div>
        <div class="erstellen"> <input type="submit" value="Erstellen"> </div>
        <br><br>
        <p class="liste"></p>
    </body>
    <script>
        $(document).ready(function(){
            $(".erstellen").click(function(){
                $("input").appendTo(".liste");
            });
        });
    </script>
  </body>
</html>


jQuery Eingabe unten einfügen?
HTML, CSS, JavaScript, JQuery
jQuery list items ausgeben?

Ich soll mit dem vorgegebenen Code den <script> Teil unten ergänzen, so dass, wenn ich einen Titel eingebe, die Library durchsucht wird und Titel, Regisseur und Jahr ausgegeben wird. Außerdem soll eine Nachricht ausgegeben werden, wenn der Titel nicht existiert.

Nur bin ich komplett überfordert was jQuery angeht und weiß nicht wie das funktionieren soll, könnte mir da jemand helfen?

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktikum Webanwendungen 1</title>
    <style>
      input,
      button {
        margin: 10px;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      var library = [
        {
          title: "Avengers",
          director: "Joss Whedon",
          releaseyear: 2012
        },
        {
          title: "Harry Potter",
          director: "Chris Columbus",
          releaseyear: 2001
        },
        {
          title: "Skyscraper",
          director: "Rawson Thurber",
          releaseyear: 2018
        },
        {
          title: "Superman",
          director: "Richard Donner",
          releaseyear: 1978
        },
        {
          title: "Der längste Tag",
          director: "Ken Annakin",
          releaseyear: 1962
        },
        {
          title: "Star Wars",
          director: "George Lucas",
          releaseyear: 1977
        }
      ];
    </script>
  </head>
  <body>
    <h1>Filmsuche</h1>


    <table>
      <tr>
        <td>
          <label for="search">Suche: </label>
          <input id="search" type="text">
        </td>
        <td colspan="2">
          <button id="searchButton">Suchen</button>
        </td>
      </tr>
      <tr>
        <td>
          <label for="title">Titel:</label>
          <input id="title" type="text">
        </td>
        <td>
          <label for="director">Regisseur:</label>
          <input id="director" type="text">
        </td>
        <td>
          <label for="releaseyear">Erscheinungsjahr:</label>
          <input id="releaseyear" type="text">
        </td>
      </tr>
    </table>


    <script>
      $(document).ready(function() {
        $("#searchButton").click(function() {
          
          
        });
      });
    </script>    
  </body>
</html>
JavaScript, JQuery, library, JSON
PHP aktualisieren?

Hallo,

ich habe etwas mit ein paar Webseiten herumgespielt, aber bin vor einem Problem, welches ich nicht gelöst bekomme!

Wenn ich Feld 02 öffne und auf "Anzeigen" klicke, komme ich auf Feld 01 und muss wieder auf Feld 02 wechseln und das ist mein Problem. Wenn man auf Feld 02 bleibt, wäre das schon gut, aber besser wäre den "Anzeigen"-Knopf weg zu lassen und es anzeigen zu lassen, wenn man die Webseite aktualisiert. Aber das habe ich leider auch nicht hinbekommen und verzweifle langsam.

<DOCKTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>TITEL</title>
    <link href="Style.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  </head>
  <body>
    <div id="accordion" class="accordion">
      <div class="accordion-box">
        <a href="#" class="accordion-header active-accordion">01</a>
        <div class="accordion-content accordion-test" id="acrd_1" style="display:block">
          <div class="accordion-content-flex">
            <p>Hallo</p>
          </div>
        </div>
      </div>
      <div class="accordion-box">
        <a href="#" class="accordion-header">02</a>
        <div class="accordion-content" id="acrd_2">
          <div class="accordion-content-flex">
            <form method="post" action="Index.php" class="hi">
              <input type="submit" value="Anzeigen" name="sent">
            </form>
            <?php
              if ($_REQUEST['sent']) {
                $file = 'textspeicher/action.txt';
                $content2 = unserialize(file_get_contents($file));
                echo nl2br("<center>$content2<center>");
              }
            ?>
          </div>
        </div>
      </div>
      <script>
        $(function() {
          $(".accordion-header").click(function(event) {
            event.preventDefault();
            var dis = $(this);
            var acr_box = dis.closest(".accordion");
            
            if (!dis.hasClass("active-accordion")) {
              acr_box.find(".accordion-header").removeClass("active-accordion");
              dis.addClass("active-accordion");
              acr_box.find(".accordion-content").slideUp();
              dis.next().stop(true, true).slideToggle();
            }
          });
        });
      </script>
    </body>
HTML, Webseite, CSS, JavaScript, HTML5, PHP, Programmiersprache, Webentwicklung
Zellen in der Tabellenansicht werden komprimiert und verkleinert?

Vor 2 Tagen habe ich angefangen, eine APP als Schulprojekt mit Swift und Storyboard zu entwickeln. Jetzt habe ich angefangen, UITableViews zu verwenden und habe auch Cells-Design, aber irgendwie werden sie generiert und verkleinert, und ich verstehe nicht genau, warum.

Wie ich es entworfen habe:

Wie es aussieht:

Ich habe diese Subclass geschrieben

import UIKit

class ContentView: UITableViewCell {
    
    @IBOutlet weak var CellPriority: UILabel!
    @IBOutlet weak var FromCell: UILabel!
    @IBOutlet weak var CellTime: UILabel!
    @IBOutlet weak var CellDesc: UILabel!
    @IBOutlet weak var CellTitle: UILabel!
    @IBOutlet weak var CellImage: UIImageView!
}

und das ist mein ViewController:


import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{
    @IBOutlet weak var ContentTable: UITableView!
    var ContentArray = [ContentView]()
    

    
    override func viewDidLoad() {
        super.viewDidLoad()
      
        
   
        
        
        ContentTable.dataSource = self
        ContentTable.delegate = self
    }
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 6
    }
    
    
    
    var titleArray = ["asd", "bsd", "csd", "dsd", "esd", "fsd", "gsd", "hsd", "isd", "jsd", "ksd", "lsd", "msd", "nsd", "osd", "psd", "qsd", "rsd", "ssd", "tsd", "usd", "vsd", "wsd", "xsd", "ysd", "zsd"]
    var descArray = ["asd", "bsd", "csd", "dsd", "esd", "fsd", "gsd", "hsd", "isd", "jsd", "ksd", "lsd", "msd", "nsd", "osd", "psd", "qsd", "rsd", "ssd", "tsd", "usd", "vsd", "wsd", "xsd", "ysd", "zsd"]
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = ContentTable.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! ContentView
      
        let image = UIImage(named:"")
        cell.CellImage.image = image
        
        
        cell.CellTitle.text = titleArray[indexPath.row]
        cell.CellDesc.text = descArray[indexPath.row]
        
      
        cell.CellTime.text = "resultE"
        cell.CellPriority.text = "!!!"
        cell.FromCell.text = "lol"

        return cell
    }
}

(Ich habe alles andere, was bezüglich des Problems unnötig ist, gelöscht) (Das waren Dinge wie der "erstellen"-Button und so weiter.)

Vielen Dank

Zellen in der Tabellenansicht werden komprimiert und verkleinert?
HTML, Webseite, Java, JavaScript, C Sharp, Python, Swift, Xcode, SwiftUI
JS. Toggle funktioniert nicht wie gewünscht?

Hi ,

ich versuche einen Darkmode zu bauen. Leider funktioniert mein Script nicht richtig und ich verstehe nicht weshalb.

Was soll passieren?

1 ) Bei Drücken des Buttons  (  i, ID=theme-button)  soll die Klasse „dark-theme“ im Bodenelement hinzugefügt, bzw. gelöscht werden. Zudem soll ein Eintrag im LocalStorage erfolgen. – Funktioniert

2) Bei Drücken des Buttons  (  i, ID=theme-button)  soll der KlassenName von „fa-moon“ in „fa-sun“ getauscht werden und ein Eintrag im  LocalStorage erfolgen. – Hier tritt der Fehler auf

Was läuft falsch?

Bei Drücken des Buttons  (  i, ID=theme-button) werden zwar die gewünschten Klassen ausgetauscht, jedoch wird die Klasse „fa-moon“ nicht gelöscht.

Heißt…

 Ausgangsituation:

 <i class="fa-solid fa-moon" id="theme-button"></i> 

Bei einem Klick passiert:

 <i class="fa-solid fa-moon fa-sun" id="theme-button"></i>   

Genau hier liegt der Fehler. Die Klasse fa-moon sollte verschwinden, bzw. gegen fa-sun getauscht werden.

Jemand eine Idee? 

HTML-Teil

<i class="fa-solid fa-moon" id="theme-button"></i>

JS-Teil

const themeButton = document.getElementById("theme-button"),
    darkTheme = "dark-theme",
    iconTheme = "fa-sun",
    selectedTheme = localStorage.getItem("selected-theme"),
    selectedIcon = localStorage.getItem("selected-icon"),
    getCurrentTheme = () => document.body.classList.contains(darkTheme) ? "dark" : "light",
    getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? "fa-moon" : "fa-sun";


    
selectedTheme && (document.body.classList["dark" === selectedTheme ? "add" : "remove"](darkTheme), 
themeButton.classList["fa-moon" === selectedIcon ? "add" : "remove"](iconTheme)), 
themeButton.addEventListener("click", () => {
   
    document.body.classList.toggle(darkTheme), 
    themeButton.classList.toggle(iconTheme), 
    localStorage.setItem("selected-theme", getCurrentTheme()),
    localStorage.setItem("selected-icon", getCurrentIcon());


});


JavaScript, Webentwicklung
was ist im code falsch?

hey wollte mich ein bisschen ins programmieren reinlesen aber komm nicht weiter hab echt lange gesucht aber find den fehler nicht

fehler: Uncaught TypeError TypeError: ctx.drawimage is not a function

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

  <style>

    canvas {

      background-color: rgba(0,0,0,0.8)

    }

  </style>

<script>

  let KEY_SPACE = false; //32

  let KEY_UP = false;// 38

  let KEY_DOWN = false; //40

  let canvas;

  let ctx;

  let backgroundimage = new Image();

  let stefan = {

    x: 100,

    y: 200,

    width: 913,

    high: 1115,

    scr:"img/stefan.jpeg"

  }

  let samir = {

    x: 500,

    y: 200,

    width: 750,

    high: 741,

    scr:"img/samir.jpeg"

  }

  document.onkeydown = function(e) {

      if (e.keyCode == 32) { // leertaste gedrückt

        KEY_SPACE = true;

      }

        

      }

      document.onkeyup = function(e) {

      if (e.keyCode == 32) { // leertaste losgelassen

        KEY_SPACE = false;

      }

        

      }

      document.onkeydown = function(e) {

      if (e.keyCode == 38) { // oben gedrückt

        KEY_SPACE = true;

      }

        

      }

      document.onkeyup = function(e) {

      if (e.keyCode == 38) { // oben losgelassen

        KEY_SPACE = false;

      }

        

      }

      document.onkeydown = function(e) {

      if (e.keyCode == 40) { // down gedrückt

        KEY_SPACE = true;

      }

        

      }

      document.onkeyup = function(e) {

      if (e.keyCode == 40) { // down losgelassen

        KEY_SPACE = false;

      }

        

      }

      function startGame(){

      canvas = document.getElementById('canvas');//ctx vorher canvas

      ctx= canvas.getContext('2d');

      loadimages();

      draw();

      //calculate

      }

      

      function loadimages(){

        backgroundimage.src= 'img/currywurst.jpg'

        stefan.img = new Image();

        stefan.img.src = stefan.scr;

        samir.img = new Image();

        samir.img.src = samir.src;

      }

      function draw(){

        ctx.drawimage(backgroundimage, 0, 0);

        ctx.drawimage(stefan.img, stefan.x, stefan.y, stefan.width, stefan.height);

        

        requestAnimationFrame(draw)

      }

</script>

</head>

<body onload="startGame()">

  <canvas id="canvas" width = "720" height = "480"></canvas>

</body>

</html>

Webseite, JavaScript, Programmiersprache

Meistgelesene Fragen zum Thema JavaScript