CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

HBechJ Nybegynder

06. februar 2013 - 22:22 Der er 15 kommentarer

JavaScript . Skifte billed eller farve.

Hej Eksperter

Jeg er løbet i en udfordring da både HTML og JavaScript er meget nyt for mig, men er dog kommet frem til det er javascript jeg skal bruge.

Det er en kombination af web programmering og PLC (Lille programmerbar enhed) programmering, Denne har en indbygget web server. For og gøre forklaringen nemmere laver jeg et lille eksempel.

Jeg har en fysisk knap der er forbundet på en indgang på min PLC. når knappen aktiveres sætter den et tag 1 ( høj eller true) i PLCen. Dette tag kalder vi "Knap" og det er et bit / bool.

Nu vil jeg gerne have en firkant til og skifte fra rød når taget "knap" er 0 til grøn når taget "knap" er 1. på den side jeg har på web serveren.
eller skifte mellem to billeder, et billed med en rød lampe til et billed med en grøn lampe.

hvilken af løsningerne det bliver er lige meget.

Her er et eksempel på noget af min HTML kode.


<form method="POST">
Ændre værdi i PLC: <input name='"Knap"' value=:="Knap": type="text">
</form>

Dette gør det muligt og læse værdien af taget "knap", om det er 1 eller 0.
AWP koden fungere som en kommentar i HTML men når PLCen ser den linje ved den hvilken tags der skal bruges på web serveren, så det er en måde og linke web server og PLC sammen.

Men mit spørgsmål hvordan skal det java script se ud for og løse det med og skifte fra grøn til rød.

Håber der sidder en super JavaScript der ude :)

Synes godt om

HBechJ Nybegynder

06. februar 2013 - 22:22 #1

Hvis der er noget der er dårlig forklaret spørg endelig ind til det og jeg vil prøve og forklare det bedre.

Synes godt om

olebole Juniormester

07. februar 2013 - 00:06 #2

<ole>

Dine name og value attributter ser meget sære ud. Anyway, så giv alle dine felter en id:

Så kan du sætte farven med:

document.getElementById("knap_1").style.background = "red";

/mvh
</bole>

Synes godt om

HBechJ Nybegynder

07. februar 2013 - 09:36 #3

Hej Ole.

Det hvad er der galt med name og value attributter ?

Den første linje du skriver med jeg skal give dem et Id giver god mening.

Men nå to. har jeg svært ved og gennemskuge.

Skal jeg ikke bruge et element eller objekt jeg kan tildele denne background ?

Hvordan ser den på værdien af "knap"?

Synes godt om

HBechJ Nybegynder

07. februar 2013 - 13:54 #4

Jeg har faktisk selv løst udfordringen med hjælp fra et andet forum.

sådan set den komplette kode ud nu.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
<title>Status cirkel</title>

<style type="text/css">
.cirkelOnline {
height: 100px;
width: 100px;
border-radius: 80px;
border: solid 3px;
background-color: green;
}
.cirkelOffline {
height: 100px;
width: 100px;
border-radius: 80px;
border: solid 3px;
background-color: red;
}
</style>

<script>
function cirkel() {
var status = :="Knap":;
var cirkel = document.getElementById("cirkel");

if(status == 0) {
cirkel.className = "cirkelOffline";
} else {
cirkel.className = "cirkelOnline";
}
}
</script>
</head>
<body onload="cirkel()">
<div id="cirkel"></div>
Knap: :="Knap":<br clear="none">
</body>
</html>

Nu har jeg en firkant der skifter fra rød til grøn alt efter værdien af "Knap"

og neden under skriver den værdien på "knap" 1 eller 0.

Jeg vil stadig meget gerne høre noget uddybende om det du skrev ole. og self. belønde point for det.

Synes godt om

olebole Juniormester

07. februar 2013 - 15:41 #5

Nej, det kommer ikke i nærheden af en løsning =)

1) Du bruger du en DTD, som disabler store dele af CSS i IE.

2) Du bruger CSS-properties, som ikke er understøttet af gængse browsere på WWW.

3) Du skal angive en type attribut på SCRIPT tagget.

4) clear er ikke en valid attribut på et BR-element - og hvad skulle den gøre?

5) Sriptet fungerer ikke i nogen eksisterende browser.

:="Knap": er ikke en valid/brugbar værdi i JavaScript - og heller ikke som value på et felt

Synes godt om

HBechJ Nybegynder

07. februar 2013 - 16:59 #6

Håber du vil bruge lidt ekstra tid på forklaring :)

1. Hvad er DTD?

2. Ved godt det ikke er understøttet i alle browser, men er det ikke i alle nye browser, firefox, chrome IE 8,9?

3. Hvordan skal det præcis skrives, og hvad forskelleg gør det at den er der?

4. Den del er stjålet fra et eksempel, er ikke selv klar over hvad den gør i forhold til <br>

5. Hvorfor ikke, dem jeg har testet i fungerede det fint?

:="Knap": fungere som det er nu, hvad mener du der skulle have været i stedet?

Det hele er testet og fungere med den kode.

Synes godt om

olebole Juniormester

07. februar 2013 - 18:27 #7

1) DTD = 'DocType Definition'. Læs evt. denne artikel om emnet. Du kan bruge f.eks:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



<!DOCTYPE html>

2) border-radius er ikke understøttet i IE9 eller før.

3)
<script type="text/javascript">

4) Det viser sig, den faktisk eksisterer, men er deprecated. Don't use =)

5) Nej, det kan ikke passe. Scriptet kan simpelthen ikke afvikles i nogen eksisterende browser =)

Enhver HTML attribut består af to dele, adskilt af et lighedstegn: Et navn og en værdi. Værdien skal være omkranset af gåseøjme, når den består af andet end bogstaver, tal og underscore.

I JavaScriptet, du skriver, vil linjen:

var status = :="Knap":;

- nødvendigvis smide en fejl og stoppe den videre afvikling af funktionen. Udtrykket er komplet uden mening i JavaScript.

Der er noget, du ikke fortæller. Én ting er dog 100% sikkert: Den kode, du viser i #4 har du ikke fået til at virke i nogen browser =)

Synes godt om

HBechJ Nybegynder

07. februar 2013 - 20:29 #8

1. Den er kopieret fra PLC producentens manual :-)

2. Du har ret,det er derfor jeg ser det som en firkant. Men det er OK.

3. OK kan jeg godt se efter og have læst lidt, sjovt det virker uden.

4. Der kan man se, har det så nogen særlig funktion?

5. Smider et par print screen op i morgen så du kan se det virker.

Men det virker, er det ikke fordi det er en funktion intet java script det virker sådan som det er skrevet der?

Synes godt om

olebole Juniormester

07. februar 2013 - 21:42 #9

Nej, det er ligegyldigt, hvordan det vendes og drejes - det virker ikke. Upload hellere et par billeder af en flyvende gris. De er lettere at finde =)

Du kan jo i stedet prøve med dette script og se, hvor meget af koden, der afvikles:

Så burde det være tydeligt for enhver, at det ikke virker =)

Du er nødt til at slå fejlmeddelelser til i din browser. Ellers arbejder du i blinde

Synes godt om

HBechJ Nybegynder

07. februar 2013 - 21:55 #10

ok tror jeg er med, du mener det er denne linje det er galt med :
var status = :="Knap":;

først så linjens sådan ud :
var status = Knap;
Det gav ingen visning overhovedet.

Andet forsøg var den sådan :
var status = "Knap";
Så kom der en grøn kasse frem, men den skiftede ikke farve.

tredje forsøg var sådan :
var status = :="Knap":;
Og så virkede det, der kom en rød kasse frem som blev rød når jeg trykker på knappen.

Synes godt om

olebole Juniormester

07. februar 2013 - 22:18 #11

Sorry, men det må jeg se, før jeg kan tro det. Det er ganske enkelt en umulighed. Du finder ikke en JavaScript-kyndig, som vil anse en flyvende gris med hjelm og stribet tricot for mere usandsynlig =)

Her ville jeg være komplet idiot, hvis ikke jeg var villig til at låne en milliard og gå 'all in' =)

Synes godt om

chriz7913 Nybegynder

08. februar 2013 - 19:56 #12

2) border-radius fungerer ikke i IE8 og nedefter - kilde: http://caniuse.com/#search=border-radius

3) Ifølge dokumentationen behøver man ikke skrive type-attributen hvis det er HTML5, hvis det er HTML4.X SKAL man dog skrive den ifølge dokumentationen.

5) Det er rigtig nok at JS-koden ingen mening vil give og den vil spytte en fejl ud, men den eneste måde jeg kan se at det kan give mening på, er at hans PLC (har ingen forstand på hvad det er) omskriver

:="Knap":

til enten 0 eller 1, alt efter hvad knappens status er, før den bliver sendt til browseren.

Hvis det er tilfældet vil det sagtens kunne give mening, da scriptet fint vil kunne gennemføres, og i HTML'en vil der enten stå

Knap: 1

eller

Knap: 0

efterfulgt af

<br>

Synes godt om

olebole Juniormester

08. februar 2013 - 20:51 #13

@chriz7913: border_radius er naturligvis understøttet i IE9 =)

Det er dog rystende underordnet med den DTD, der blev anvendt - da den disabler store dele af CSS i IE. Herunder border_radius.

Det glæder mig, vi er helt enige om type attributten på et SCRIPT-tag. Da koden, der var tale om, ikke var skrevet mod HTML5, var det en klar fejl.

Til dit punkt 5, kan jeg kun sige, at jeg er helt sikker på, du tager fejl. Koden, spørger viser i #4, er med statsgaranti ikke den kode, han har testet på.

Jeg tør satse alle chips på, at variablen status sættes på en anden måde i funktionen.

'Sådan-cirka-som-jeg-har-gjort-kode' er bare ikke særlig brugbar, når man skal finde fejl. Man er nødt til forklare præcis, hvad man faktisk foretager sig.

Synes godt om

HBechJ Nybegynder

12. februar 2013 - 10:08 #14

Jeg skal ikke kunne forklare hvorfor og hvordan. men med den kode jeg poster i #4 får jeg dette resultat.

Knap Aktiv : http://i50.tinypic.com/2yx5069.jpg

Knap ikke aktiv : http://i49.tinypic.com/2whjccl.jpg

Det bliver ikke cirkler da browseren ikke forstår det CSS, men ellers virker det som det skal.

Synes godt om

olebole Juniormester

12. februar 2013 - 16:31 #15

Billeder kan man ikke rigtig bruge til noget, for der kan koden jo ikke forklare udseendet. Du disabler vel stadig selv CSS med DTD'en

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS