Hintergrundfarbe ändern eines Elements(.createElement) in Javascript?

inputDecrease = document.createElement('input');
inputDecrease.type = 'button';

dachte jetzt

inputDecrease.style.background = "red";

geht aber nicht :(

weiß jemand wie das geht?

2 Antworten

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, Programmieren & Softwareentwicklung

28.09.2022, 19:36

Doch, das geht so, wobei background-color besser ist:

inputDecrease.style.backgroundColor = "red";

Wie sieht den den ganzer Code aus?

Mehr dazu findest du auch hier:

https://www.mediaevent.de/javascript/style.html

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

BloedeFragenxD

Fragesteller

28.09.2022, 19:52

Leider ist mein Projekt schon etwas größer deswegen wäre es ziemlich unübersichtlich. Aber ich kann die wichtigen Dinge schicken:

BloedeFragenxD

Fragesteller

28.09.2022, 19:54

function addRow() {
        var label, inputDecrease, content, Ptag;
        // div
        content = document.getElementById('content');
        // P tag
        Ptag = document.createElement('p');
        // Label
        label = document.createElement('label');
        // inputDecrease
        inputDecrease = document.createElement('input');
        inputDecrease.type = 'button';
        inputDecrease.value = document.getElementById('inputtext').value;
        inputDecrease.setAttribute('onclick', 'removeRow(this)')
        // Put in each other
        Ptag.appendChild(label);
        Ptag.appendChild(inputDecrease);
        content.appendChild(Ptag);
        document.getElementById('inputtext').value = '';
    }

<div id="content" class="content">
</div>

Babelfish

28.09.2022, 21:36

@BloedeFragenxD

In dem Code wir kein style gesetzt.

IchMalWiederXY

28.09.2022, 19:44

mmhhEin Element dass bereits statisch vorhanden ist lässt sich so einfärben. Sieht deinem Code ähnlich
<!DOCTYPE html>
<html>
<body>
<button id="ctest" onclick="myFunction()">Set background</button>
<script>
function myFunction() {
  var c = document.getElementById("ctest");
  c.style.background = "red";
}
</script>
</body>
</html>
====
Aber, wo hast du das Element gezeichnet, so dass du festellst, dass es sich nicht einfärbt ?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zur Frage

Input required?

Wie kann ich mit Javascript ein Input required machen, denn bei Html kann man es ja ändern bei untersuchen

...zur Frage

JavaScript (html) Element zentrieren?

Hallo ich habe in JavaScript ein Element erstellen lassen und die Größe perfekt angepasst, nun muss es nur noch zentriert werden aber irgendwie funktioniert nichts, egal was ich versuche bleibt es immer in der linken oberen Ecke!

...zur Frage

JavaScript Puzzle Spiel?

Ich hab da ein Problem mit meinem Kleinen Puzzle spiel,

Es hat alles funktioniert, jedoch hab ich eine Sache nicht bedacht unzwar das die Karten immer auf einer Stelle sind.
Wie könnte ich das Umsetzen ?

Also Immer nur 2er Paare als Elemente Kreieren die aber auch nicht immer nebeneinander sind

Hier wäre ein dummer Ansatz von mir, vielleicht könnte man darauf aufbauen.

let kiwis = ["🥝","🥝"];
let cocos = ["🥥","🥥"];
let strawberrys = ['🍓','🍓'];
let cherry = ["🍒","🍒"];

arr = [kiwis,cocos,strawberrys,cherry]

arr.forEach(element => {
    element.forEach(element => {
        let Puzzelteil = document.createElement("td")
        document.body.appendChild(Puzzelteil)
        Puzzelteil.innerHTML = element
    });
});

Den Rest / Überprüfen ob man gewonnen hat könnte ich dann selber machen wenn sie richtig durchgemischt sind.

...zur Frage

JavaScript Hintergrundfarbe von div ändern?

Kann mir bitte jemand sagen wie ich mit JavaScript die Farbe des Hintergrundes von einem div ändere?

Ich habe es schon mal versucht mit

document.getElementsByClassName("div").style.backgroundColor = "red"

zu ändern, aber es funktioniert nicht.

Wie mache ich das?

...zur Frage

Mehrere inputs auf einmal vergleichen mit Javascript?

Ich habe mehrere Input-Elemente mit der selben id. Ich möchte die Eingaben dieser Input Elemente auf einmal zu vergleichen (bin zu faul jedem Element eine eigene id zu geben und die alle einzeln zu vergleichen) gibt es da eine Möglichkeit?

Ich möchte also erreichen, dass wen eines der eingegebenen Sachen mit dem vorgegebenen Wert übereinstimmt die Sache gemacht wird.

if(Die Sache die ich nicht weiß == "text"){
}

Hat jemand Ideen?

Hoffe auf Antworten,

-Bohne47

...zur Frage

Wie kann man mit PHP/JavaScript eine neue Website erstellen?

Hey Freunde

wie kann man mit PHP/JavaScript eine neue Website direkt im Browser erstellen? Also man gibt zum Beispiel den Inhalt und Titel an, drückt auf "Submit" und es wird automatisch eine neue Website erstellt, genau mit den Eingaben! Halt so ähnlich wie in WordPress bei einem neuen Blog Eintrag!

Vielen Dank!

--Ergänzung--

Mein Gedanke wäre jetzt gewesen, ein Template zu erstellen. Dann eine weitere Seite mit einem Input Field, deren Input dann PHP Variablen zugewiesen werden. Beim Drücken Des Buttons wird dann die Template Datei kopiert, und der Input eingesetzt!

...zur Frage

Javascript: Mehreren Elementen eine Klasse active hinzufügen?

Hallo. Aktuell ist es so, dass wenn ich auf den Button klicke, immer nur das erste Element die Klasse active bekommt und verschwindet. Wie lautet der Befehl, damit alle Elemente, die die Klasse "TestTest" haben, die Klasse active bekommen?

Anscheinend funktioniert es mit dem Befehl: TestText.classList.toggle("active"); nur für 1 Element

hier mein code:

...zur Frage

JavaScript: Farbe von Element ändern?

Hi Leute!

Ich will die Farbe eines Elementes(b) ändern, wenn das Element(a) über ein anderes bestimmtes Element hovert.

Heißt, das Element b ist fix am Bildschirm. Nun scrollt der User und das Element hovert das Element a. Nun soll etwas mit b passieren, wie gehe ich das mit JavaScript an?

Danke für eure Antworten!

...zur Frage

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Wo soll ich meine elemente in dem Javascript einfügen?

<script>
      document.addEventListener('DOMContentLoaded', function() {
          const scrollButtons = document.querySelectorAll('.button1');

          scrollButtons.forEach(button => {
              button.addEventListener('click', function() {
                  const target = button.getAttribute('data-target');
                  const targetElement = document.getElementById(target);

                  if (targetElement) {
                      window.scrollTo({
                          top: targetElement.offsetTop,
                          behavior: 'smooth'
                      });
                  }
              });
          });
      });
  </script>

Hi,

AI hat mir den code gegeben um meine buttons nützlich zu machen. Weil ich kein Javascript kann weiß ich nicht wo ich meine class namen einfügen soll.

Bitte helft mir

LG Lisa

...zur Frage

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zur Frage

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen