background von div per Javascript ändern
0 0 
Beat
0 
Gunnar Bittersmann
0 0 0 
MudGuard
background von div per Javascript ändern
Der MartinHello World,
ich würd gern über JavaScript den Hintergrund meiner Div-Box ändern.
Habe dazu folgendes ausprobiert:
------------------------------------------------------------------------
function test(box_1)
{
document.getElementByID(box_1)div.style.background="green";
}
...
<div id="box_1">Mein Inhalt</div>
...
<a href="javascript:test()">Farbe wechsel Dich</a>
------------------------------------------------------------------------
Da passiert nur leider garnichts. Hab´s dann nochmal so ausprobiert:
------------------------------------------------------------------------
function test(box_1)
{
document.getElementByName(box_1)div.style.background="green";
}
...
<div name="box_1">Mein Inhalt</div>
...
<a href="javascript:test()">Farbe wechsel Dich</a>
------------------------------------------------------------------------
Passiert auch nichts.
Was mache ich Falsch?
thx
-
hallo
function test(box_1)
{
document.getElementByID(box_1)div.style.background="green";
}
...<div id="box_1">Mein Inhalt</div>
...
<a href="javascript:test()">Farbe wechsel Dich</a>
probiere mal
document.getElementByID('box_1').style.background="green";und
<a href="javascript:void()" onclick="test">Farbe wechsel Dich</a>-
Hello World,
ich poste mal meine komplette test-Datei
Irgendwie scheine ich da was zu übersehen...
------------------------------------------------------------------------
<script type="text/javascript">
function test()
{
document.getElementByID('box_1').style.background="green";
}
</script>
</head>
<body style="background:grey;">
<div id="box_1" style="height:50px;width:200px;background:yellow;text-align:center;">Mein Text</div>
<a href="javascript:void()" onclick="test">Farbe wechsel Dich</a>
</body>
</head>
------------------------------------------------------------------------thx
-
Hi,
Irgendwie scheine ich da was zu übersehen...
Irgendwie scheinst du dir nicht mal JavaScript-Grundkenntnisse angeeignet zu haben - das solltest du nachholen.
function test()
{
document.getElementByID('box_1').style.background="green";Der Methodenname ist immer noch falsch geschrieben.
<a href="javascript:void()" onclick="test">
Und hier rufst du deine Funktion nicht mal auf.
MfG ChrisB
--
The most exciting phrase to hear in science, the one that heralds new discoveries, is not “Eureka!” but “That's funny...” [Isaac Asimov]
-
-
@@Tim:
nuqneH
<a href="javascript:test()">Farbe wechsel Dich</a>
<a href="javascript:void()" onclick="test">Farbe wechsel Dich</a>Warum sollte ein 'a'-Element mit nichtstuendem JavaScript im @href und @onclick-Eventhandler besser sein als eins, das den JavaScript-Aufruf im @href hat?
Wenn kein Link, dann kein 'a'-Element! 'button' könnte sich anbieten.
Und wenn du eine Funktion aufrufen willst, dann mit Klammern:
test()bzw.test(parameter).probiere mal
document.getElementByID('box_1').style.background="green";Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Warum sollte ein 'a'-Element mit nichtstuendem JavaScript im @href und @onclick-Eventhandler besser sein als eins, das den JavaScript-Aufruf im @href hat?
Wenn kein Link, dann kein 'a'-Element! 'button' könnte sich anbieten.
Letztendlich soll die Funktion über eine checkbox ausgeführt werden.
thx
-
-
-
function test(box_1)
Hier erwartest du einen übergabeparameter
{
document.getElementByID(box_1)div.style.background="green";
}
...<div id="box_1">Mein Inhalt</div>
...
<a href="javascript:test()">Farbe wechsel Dich</a>
Hier übergibst du aber nichts!
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische -
@@Peer:
nuqneH
document.getElementByID(box_1)div.style.background="green";
--8<--
document.getElementByName(box_1)div.style.background="green";Das http://de.selfhtml.org/javascript/objekte/document.htm@title=document-Objekt hat weder eine Methode
getElementByID()noch eine MethodegetElementByName().Und dass 'div' hinter ')' ein Fehler ist, hätte dir deine Fehlerkonsole auch verraten.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Das http://de.selfhtml.org/javascript/objekte/document.htm@title=document-Objekt hat weder eine Methode
getElementByID()noch eine MethodegetElementByName().Das verstehe ich jetzt nicht.
Über Dein Link finde ich z.B. folgendes Szenario:<html><head><title>Test</title>
<style type="text/css">
.normal { font-style:normal }
</style>
<script type="text/javascript">
function Ausrichten (wie) {
document.getElementById("unentschlossen").align = wie;
}
</script>
</head><body>
<h1 id="unentschlossen">Wo gehöre ich eigentlich hin?</h1>
<a href="javascript:Ausrichten('left')">links?</a><br>
<a href="javascript:Ausrichten('center')">zentriert?</a><br>
<a href="javascript:Ausrichten('right')">rechts?</a><br>
</body></html>Hier wird das get.ElementByID doch über das document angesprochen.
Du sagst aber dass das dokument nicht die Methode get.ElementByID hat.
Da kann ich jetzt nicht folgen...thx
-
Hi,
Das verstehe ich jetzt nicht.
Dann mach langsam mal die Augen auf ...
Über Dein Link finde ich z.B. folgendes Szenario:
[...]document.getElementById("unentschlossen").align = wie;
Hier wird das get.ElementByID doch über das document angesprochen.
Du sagst aber dass das dokument nicht die Methode get.ElementByID hat.Stimmt, das gibt's noch weniger.
Bist du nicht in der Lage, eine Kombination von etwas über einem Dutzend Zeichen mal fehlerfrei abzutippen, statt jedes mal was anderes zu schreiben?Da kann ich jetzt nicht folgen...
Wenn du dir mal die Methodennamen kopierst, den aus dem Beispiel, und den aus deinem eigenen Machwerk, und sie untereinander schreibst -
document.getElementById
document.getElementByID- merkst du dann endlich was ...?
MfG ChrisB
--
The most exciting phrase to hear in science, the one that heralds new discoveries, is not “Eureka!” but “That's funny...” [Isaac Asimov]-
Ich sage doch - ich habe was übersehen... :)
Mehr wollte ich doch garnicht wissen...
Vielen Dank für den Zaunpfahl und bis irgendwann einmal
thx
-
Ihr werdet mich bestimmt steinigen, aber ich muss in diesem Thema doch nochmal nachhaken.
Ich will nun den Hintergrund mittels einer Checkbox ändern und habe es wie folgt getestet:
---------------------------------------------------------------------------
<script type="text/javascript">
function test()
{
if (document.getElementById('box').style.display = (chk.checked))
{
document.getElementById('text').style.background="green"';
}
else
{
document.getElementById('text').style.background="yellow"';
}
}
</script>
</head>
<body style="background:grey;">
<input type="checkbox" value="true" id="box" onclick="test();">
<br>
<div id="text" style="height:50px;width:200px;background:yellow;text-align:center;">Mein Text</div>
<br>
</body>
</head>
---------------------------------------------------------------------------Ich bin gespannt was nun schon wieder falsch ist
*kopfschützenduntermarmherausschiel*thx
-
Hi,
if (document.getElementById('box').style.display = (chk.checked))
Das ist eine Zuweisung, kein Vergleich.
Und auch als Vergleich ergibt es wenig Sinn - welche Werte kann die display-Eigenschaft annehmen, und welche die checked-Eigenschaft einer Checkbox?
MfG ChrisB
--
The most exciting phrase to hear in science, the one that heralds new discoveries, is not “Eureka!” but “That's funny...” [Isaac Asimov] -
Hi,
Ich will nun den Hintergrund mittels einer Checkbox ändern und habe es wie folgt getestet:
<script type="text/javascript">
function test()
{
if (document.getElementById('box').style.display = (chk.checked))"Lies die Eigenschaft checked des Objekts chk, weise ihren Wert der display-Eigenschaft des HTML-Elements mit der ID 'box' zu, und wenn der Wert nicht leer ist, dann ..."
{
document.getElementById('text').style.background="green"';
}"... setze die background-Eigenschaft eines Elements mit der ID 'text' auf den Wert 'green'."
Vermutlich ist die erste der beiden Zeilen (die mit der if-Abfrage) nicht das, was du haben willst. Eine Zuweisung innerhalb eines if-Statements ist möglich und syntaktisch erlaubt; wenn man weiß, was man tut, kann sie sogar sinnvoll sein. Meistens meint man aber einen Vergleich.
Das ergibt im obigen Beispiel aber auch keinen Sinn - mal angenommen, chk sei eine Referenz auf ein checkbox-Element, dann wäre dessen checked-Eigenschaft entweder true oder false. Keiner der beiden Werte wäre ein gültiger Wert für die CSS-Eigenschaft display.
Du solltest nochmal intensiv darüber nachdenken, was du eigentlich willst - und es mit dem vergleichen, was du tatsächlich tust.
Der zweite Punkt ist in deinem Fall möglicherweise nicht relevant, aber ... wenn du nur die Hintergrundfarbe setzen möchtest, solltest du auch nur diese Eigenschaft (backgroundColor oder in CSS background-color) ansprechen. Über die Sammeleigenschaft background werden nämlich erst alle anderen Eigenschaften des Hintergrunds (background-image, background-attachment, ...) auf ihre Defaultwerte gesetzt.<body style="background:grey;">
Die meisten Browser sind inzwischen tolerant gegenüber der Schreibweise - aber der korrekte Wert lautet "gray" (amerikanische Schreibweise).
</body>
</head>Das kann überhaupt nicht sein: Das head-Element muss längst geschlossen sein, wenn body beginnt, also kann </head> niemals nach </body> auftauchen.
Ich bin gespannt was nun schon wieder falsch ist
*kopfschützenduntermarmherausschiel*So dies und jenes ... ;-)
Ciao,
Martin--
Bitte komme jemand mit einem *g* zum Wochenende, damit nicht über mich gelacht wird.
(Gunnar Bittersmann)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
@@Peer:
nuqneH
Ich bin gespannt was nun schon wieder falsch ist
Der Einsatz von JavaScript.
Außerdem: die Notation von Stilangaben inline in @style-Attributen, unsinnige 'br'-Elemente.
Markup:
<input type="checkbox"> <div>Mein Text</div>Wobei der Text je nachdem besser in 'p' oder in 'http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=label' aufgehoben wäre.
Stylesheet:
body { background: gray; } p { background: yellow; height: 50px; width: 200px; text-align: center; } input:checked+p { background: green; }Fertig!
Naja, fast. Es sollen noch Browser im Umlauf sein, die die Pseudoklasse
:checkednoch nicht kennen und doch der Nachhilfe per JavaScript bedürfen – als CSS-Expression:p { background-color: expression( [code lang=javascript](new Function('elem', '\ [code lang=javascript] var box = document.getElementById("box");\ var setColor = function () \{ elem.style.backgroundColor = box.checked ? "green" : "yellow"; \};\ box.onclick = setColor;\ setColor();\'))(this)[/code] );}[/code]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@Gunnar Bittersmann:
nuqneH
<input type="checkbox">Oops.
<input type="checkbox" id="box">Sonst wird das nichts:
var box = document.getElementById("box");Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Hi,
document.getElementById("unentschlossen").align = wie;
Hier wird das get.ElementByID doch über das document angesprochen.Weder die Groß-/Kleinschreibung noch die Position der Punkte ist irrelevant.
getElementByID ist etwas vollkommen anderes als
getElementById oder
get.ElementByIDcu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
-