Java-script-änderung der Farbe des element by ID
Hallo bin ich versucht zu tun, eine Validierung für ein Formular, an dem ich arbeite, und ich habe eine Funktion geschrieben und verwendet
document.getElementById("span_trav_emer_med_insur").style.backgroundColor ='#FFFFFF';
Ich getestet habe, meine Funktion, um eine Warnmeldung anzeigen, box, für debugging-Zwecke, wenn 'trav_emer_med_insur markiert ist, wird das Meldungsfeld angezeigt wird. Ich habe hier und auf unzähligen anderen Websites, und Sie alle sagen getElementById.style.backgroundColor = 'color';
ist die Methode, das zu erreichen, was ich Suche. Ich verstehe nicht, an dieser Stelle, warum es nicht funktioniert, dann wird alles korrekt angezeigt wird.
Hier ist der Ausgangspunkt, relevante Teil der Funktion:
function validatePlanTypes(form) {
var error = "";
if (form.trav_emer_med_insur.checked) {
document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF';
if (!form.trav_emer_med_insur_opt1.checked || !form.trav_emer_med_insur_opt2.checked || !form.trav_emer_med_insur_opt3.checked || !form.trav_emer_med_insur_opt4.checked) {
form.trav_emer_med_insur_opt1.style.backgroundColor = 'Yellow';
form.trav_emer_med_insur_opt2.style.backgroundColor = 'Yellow';
form.trav_emer_med_insur_opt3.style.backgroundColor = 'Yellow';
form.trav_emer_med_insur_opt4.style.backgroundColor = 'Yellow';
error = "You must pick a plan-type for Travel Emergency Medical insurance, areas with a problem have been highlighted yellow for you.";
}
Bin ich nicht, testen Sie die volle Funktion noch nicht, ich versuche nur, zum testen der ersten if-Anweisung zu dieser Zeit, als ich sagte, dass die if-Anweisung funktioniert und alert("bleh"); wird eine Meldung angezeigt, wenn ich überprüfen, dass das Feld
Hier ist der HTML des Formulars, wo ich versuche, ändern Sie die Hintergrundfarbe von einem span-element umgeben die checkbox.
<p><span name="span_trav_emer_med_insur" id="span_trav_emer_med_insur" value="span_trav_emer_med_insur" style=""><input type="checkbox" name="trav_emer_med_insur" id="trav_emer_med_insur_if" value="trav_emer_med_insur_if" class="form_elements" onClick="if(this.checked){document.getElementById('trav_emer_med_options').style.display='block';}else{document.getElementById('trav_emer_med_options').style.display='none';}"/></span> <!-- Travel Emergency Medical If Box -->
<label class="form_elements" name="label_for_trav_emer_med_insur_if" id="label_for_trav_emer_med_insur_if"> Travel Emergency Medical Insurance <em>(expands when checked)</em>.</label></p>
<p>
<div id="trav_emer_med_options" name="trav_emer_med_options" class="questions_hidden">
Habe ich auch schon versucht
form.span_trav_emer_med_insur.style.backgroundColor = '#FFFFFF';
Auch ohne Erfolg, ich bin echt ratlos hier, der code ist identisch zu dem, was ich sehen, alle über das Netz. Mir bitte jemand sagen, was ich bin fehlt.
Dank,
-Sean
Bearbeiten - Nur um sicher zu gehen:
if (form.trav_emer_med_insur.checked) {
alert("bleh");
statt
if (form.trav_emer_med_insur.checked) {
document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF';
Funktioniert, so wird die if-Anweisung oder-Funktion ist kein problem.
Komplette Datei hier - mit getelementbyID funktioniert nicht - http://hotfile.com/dl/135598683/93484d4/general2.html
Komplette Datei hier mit alert('bleh') ARBEITEN -
http://hotfile.com/dl/135598746/dc9e14b/general23.html
PHP-code zeigt genau das, was ich versuche zu tun ist (ohne die Seite neu laden):
//Check if Emergency Medical is selected.
if (isset($_POST['trav_emer_med_insur'])) {
//If Emergency Medical is selected, then check to see if an option has been selected
if (isset($_POST['trav_emer_med_insur_opt1']) or isset($_POST['trav_emer_med_insur_opt2']) or isset($_POST['trav_emer_med_insur_opt3']) or isset($_POST['trav_emer_med_insur_opt4'])) {
$SQLString = $SQLString . "emer_med, emer_med_opt1, emer_med_opt2, emer_med_opt3, emer_med_opt4";
}
//If no option is selected display error message
else {
++$ErrCount;
$Errors[$ErrCount] = "You selected interest in Travel Emergency Medical Insurance but did not select a plan-type for it";
}
}
//Check if All-Inclusive Insurance is selected.
elseif (isset($_POST['allinc_insur'])) {
//If All-Inclusive Insurance is selected, then check to see if an option has been selected
if (isset($_POST['allinc_insur_opt1']) or isset($_POST['allinc_insur_opt2'])) {
}
//If no option is selected display error message
else {
++$ErrCount;
$Errors[$ErrCount] = "You have selected interest in All-Inclusive Insurance but did not select a plan-type for it";
}
}
//Check if Cancellation Insurance is selected.
elseif (isset($_POST['cancel_insur'])) {
}
//Check if Visitor Insurance is selected.
elseif (isset($_POST['visitor_insur'])) {
//If Visitor Insurance is selected, then check to see if country is selected.
if (isset($_POST['country_select'])) {
}
//If no country selected display error message
else {
++$ErrCount;
$Errors[$ErrCount] = "You have selected interest in Visitor Insurance but have not selected a country";
}
}
//If no insurane types selected display error.
else {
++$ErrCount;
$Errors[$ErrCount] = "You haven not selected interest in any insurance plan types";
}
while ($Count != $Target) {
if (checked($QuestionNames[0]) != 1);
++$Count;
}
name
von form-tag?jquery ist dein Freund hier
Chrome funktioniert es nicht, gerade getestet in FF und IE, das gleiche Problem. Firebug meldet keine Fehler in der syntax.
Zu GregL - Mein Formular ist mit der Bezeichnung mhc_form, und es wird an meine Funktion mit "onClick" der Schaltfläche Einreichen. Wie bereits in meinem post, eine alert-box NICHT laichen korrekt aus der if-Anweisung, so wird die Funktion-und wenn Sie funktioniert, aber der Stil.Hintergrundfarbe wird nicht mehr reagiert.
Können Sie das problem reproduzieren in einem Testfall? jsfiddle.net oder jsbin.com
InformationsquelleAutor SC1988 | 2011-11-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
Haben Sie versucht, geben die Spannweite einer Farbe, von der starten, nur um zu bestätigen, können Sie es sehen?
Wie dein code aussieht prefectly ok, könnte es sein, dass Sie einfach nicht sehen kann die Spanne Hintergrundfarbe.
Für was es Wert ist ich Stimme mit der OP, dass die Verwendung von jquery für etwas triviales wie das ist eine Verschwendung von Bandbreite.
Basierend auf Ihre Kommentare, die ich erstellt eine test-Seite zu simulieren verkaufen.
Dies funktioniert:
Ich habe soeben einen fix bestätigt.
Ich habe kopiert Ihre Seite genau in mein editor und speicherte es als test.html - dies funktioniert in der Tat. Ich kopierte das Dokument.getElementById Aussagen, die Sie verwendet, genau in meine Funktion. (das habe ich überprüft ist, werden arbeiten, die durch die Nutzung der alert-box). Nichts passiert....... Das problem ist, dass ich tun müssen, um eine vollständige Validierung. Ich Schätze Ihre Antwort und wenn es war einfach eine einzige check-Boxen, die ich hatte, dies zu überprüfen wäre in Ordnung. Leider ist es ein block-Boxen, wo man 4 müssen überprüft werden, und wenn die 3 aktiviert sind, sub-Optionen für jedes Kontrollkästchen muss aktiviert sein. Ich könnte überprüfen in PHP
überhaupt kein problem. Jedoch möchte ich nicht haben, um ständig Seite neu geladen....
Ich bearbeitet meine OP zu zeigen, bestätigt die Arbeit von PHP-code für das, was ich tun möchte. Mit Ausnahme der änderung der Eigenschaft Farbe als auch dabei eine Fehlermeldung. Was ich nicht verstehe ist, dass ich bestätigt if(form.trav_emer_med_insur.checked) {} ist, mit einem alert("bleh"); warum also, wenn ich kopieren getElementById code habe ich in der Datei auf meinem computer und bestätigt, um zu arbeiten, wird nicht funktionieren, wenn die if-Anweisung vorhergehenden gesagt, code funktioniert....
InformationsquelleAutor blankabout
Ich versuche zu tun, diese genaue Sache. Setze ich extra in Klammern und es funktionierte.
In:
InformationsquelleAutor Kamron
Hier ein paar Anregungen:
InformationsquelleAutor MK_Dev
Ich denke, was Sie versuchen, ist vielleicht nicht die produktivste Herangehensweise.
Sie haben hier zwei Optionen:
lernen, wie Sie mit Ihrem browser consoele finden Sie heraus, warum Ihre Stil-Einstellungen funktionieren nicht, indem Sie lernen, wie die Dinge funktionieren, die von Grund auf oder,
gehen mit jQuery, die Ihr Leben so viel besser.
Wahl 1 ist einen Versuch Wert, Sie lernen eine Menge über das, was der DOM/CSS-Strukturen Aussehen. Um dies zu tun rechten Maustaste und wählen Sie "element untersuchen", wenn Ihr browser der Wahl repsonds Blick für die Konsole und buchstäblich geben Sie "Dokument.getElementById("span_trav_emer_med_insur").Stil.backgroundColor" auf der cmd-line und sehen, was Sie bekommen. Dies ist wahrscheinlich aufschlussreicher.
Wenn Sie wollen, um Ihren job zu erledigen schnell, Holen Sie sich jQuery und versuchen Sie Folgendes:
Erste, jQuery auf Ihrer Seite gehören diese Linie (es gibt auch andere Quellen von jQuery):
statt dem code, den Sie verwenden:
verwenden Sie die folgenden:
Sehen, wie sich diese zwei Ansätze unterscheiden sich? Was Sie versuchen ist, zu verstehen, die low-level-Struktur des Browser-DOM-Modell und was jQuery ist denn für Sie stellt eine Abstraktion, die man verstehen kann, was "bitte ändern Sie den CSS-Stil "hintergrund" auf "gelb" für mich.
Ich Stimme mit den anderen, die dazu beigetragen haben, das ist wirklich die beste Vorgehensweise für Sie. Es lohnt sich, lernen jQuery.
Mehr auf die jQuery-CDN-Seiten hier jQuery CDN
jQuery css nennen
Möchte auch hinzufügen, in Bezug auf den code. Ich erkannte, dass FFFFFF weiß war, und dass vielleicht, es hat funktioniert und ich konnte nichts sehen, da der hintergrund wurde geändert, um die weiße, die es schon gab. Dies änderte sich nichts. Ich habe den hintergrund ROT mit css auf das span-element, und bin mit dem Jscript ändern, um es zu schwarz. Immer noch nichts.
Hinzugefügt jquery, die beide Ihren code und $("span_trav_emer_med_insur").css("background-color", "#000000"); nicht funktionieren......
Ich appologise wenn meine Antwort schien herablassend... ich habe, wo Sie sind und es ist nicht aus Spaß so mal sehen ob wir das beheben können, dies für Sie. Zuerst, ich bemerkte einen Fehler in der code, den ich geliefert. Sie waren gerade dabei, getElementByID, so ändern Sie die Zeichenfolge in den code von "span_trav_emer_med_insur" "#span_trav_emer_med_insur" - ' # ' char heißt, Sie sind die Wahl einer ID
Sorry vielleicht bin ich einfach nur frustriert und mis-Lesen Sie Ihre post. Ich werde versuchen, dass.
InformationsquelleAutor jottos
Ihr code korrekt ist, wenn Sie wollen, so legen Sie eine hintergrund-Farbe mit javascript zugreifen (und ändern).Stil.backgroundColor-Eigenschaft.
Also ich nehme an das problem könnte sein, die html - (und Stile), überprüfen Sie diese Geige http://jsfiddle.net/hqKwd/4/ ich die Hintergrundfarbe von einem span, der leer ist, und nichts happends, aber nach 2 Sekunden, die ich ändern Sie die innerHTML-und Sie können sehen, die Farbe. Die Sache, die ich versuche zu zeigen ist, dass ein span, es muss nicht display:block, also, wenn Sie nicht hinzufügen, dass Stil oder den Inhalt ändern, Sie können nichts sehen.
Andere Sache könnte sein, dass die Eigenschaft wird überschreiben, indem Sie ein anderes Stück code, aber anscheinend ist dies nicht der Fall
Hoffe, es hilft.
Sah fiddle. Eingefügt, genau das, was du geschrieben hast in meine Seite, nur mit einer anderen Bedingung zu nennen, was Sie geschrieben haben. Nichts. Ist meine Datei verflucht oder was????
InformationsquelleAutor nicosantangelo