/    Sign up×
Community /Pin to ProfileBookmark

Script to analysise measurements and give coloured background

Copy linkTweet thisAlerts:
Jan 26.2017

Hi all, I wonder if anyone could help me.
I am trying to create a script for a website.
Customers will enter dimensions in CM and when they click on the button the answers “yes” or “no” will appear in columns against questions such as “Is measurement A more than 60cm” etc etc.
I have managed to get the numbers to work fine but I am stuck on the following…
1) If a customer accidently puts in a letter rather than a number I would like the answer to be “error”
2) If the answer is “yes” I would like the background (where the yes and no appear) to be Green and if the answer is “no” I would like the background to be red.
You can see the table I am working on here… [url]http://tinyurl.com/jmd2zrz[/url] … (note I am only working on measurement A at present)

The script that I am using is as follows…

<script>
function standard1() {
var number = document.getElementById(“myInput”).value;
var letter = document.getElementById(“myInput”).value;
var text;
var text;

// If the letter is “c”
if (number < “56”) {
text = “yes”;

// If the letter is “c” or “e”
} else if (number === “56” || number > “56” || letter === “x”) {
text = “no”;

// If the letter is anything else
} else {
text = “error”;

}

document.getElementById(“standarda1”).innerHTML = text;
}
</script>

You can see that I am adding the letter “x” to try and get “no” but I get “no” for every letter I enter, rather than just “x” where every other letter should be “error”. The background colour, ie filling the table cell with the colour red or green is beyond me I am afraid.

I would be grateful if anyone could give a pointer here, I’m sure I am close but presently no cigar!… many thanks in advance : Dom

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@rootJan 26.2017 — When posting code, use the forum BBCode tags to wrap your code.

} else if (number === "56" || number &gt; "56" || letter === "x") { can be expressed as
} else if (number-0 &gt;= 56 || letter == "x") { note that numbers don't have quotes around them.

I would personally use, it will do the same thing, one line of code...
var text = (number-0 &lt; 56 ) ? "yes" : ( (number-0 &gt;= 56 || letter == "x") ? "no" : "error" );
You should note that the situation of an error will never arise because your number is either below or equal to or more than a set number.

if you want the error to be returned for any other reason like when the letter is c then you would need to use && check that the letter is the letter you want var text = (number-0 &lt; 56 ) ? "yes" : ( (number-0 &gt;= 56 &amp;&amp; letter == "x") ? "no" : "error" ); so now if a number is lower than 56, your return will be [B]yes[/B] if not, the number is [B]equal to or more than 56[/B] and the letter is [B]x[/B] then [B]no[/B] will be returned and for any other situation [B]error[/B] will be returned to the [B]text[/B] variable.
Copy linkTweet thisAlerts:
@domparkerauthorJan 27.2017 — Thats great, I'm very grateful for your help. I used the following as I wanted the error just in case a letter was entered in error...

[CODE]
var text = (number-0 < 56 ) ? "yes" : ( (number-0 >= 56 ) ? "no" : "error" );
document.getElementById("standarda1").innerHTML = text;
}
[/CODE]

I still have the small matter of getting the table cell where the result appears to show green when the answer is yes and red when the answer is no (background colour). Does anyone have an idea on this aspect? Many thanks again : Dom
Copy linkTweet thisAlerts:
@rootJan 27.2017 — How are you updating that cell? [B]document.getElementById("standarda1").innerHTML = text;

}[/B] can be used to apply other attributes, you just need to have a few lines of code to do just that

// get the cell target as a DOM object to update
updateCell = document.getElementById("standarda1");
updateCell.innerHTML = text;

displayClass = (text=="yes") ? : "okgreen" : (text=="error" ? "badred" : "normal");
updateCell.className = displayClass;


then set up a style sheet with the attributes you need in the head of the document
&lt;style&gt;
.okgreen {
background-color: #7fff00;
color:#000080;
}
.normal {
background-colour: transparent;
}
.badred {
background-color: #ff0000;
color: #ffff00;
font-weight: bold;
}
&lt;/style&gt;

There are a number of ways you can do the colour changes, easiest is to use CSS style because you can then apply other changes to the style like bold text, different colour text, text style (font) size, etc.
Copy linkTweet thisAlerts:
@domparkerauthorJan 27.2017 — Thanks again for your kind assistance... my link to the page I am working on was wrong, it should have been... http://tinyurl.com/hw9uuu3

I created a new script with the details above madding:

CODE:

<script>

function standard1() {


updateCell = document.getElementById("standarda1");

updateCell.innerHTML = text;

displayClass = (text=="yes") ? : "okgreen" : (text=="error" ? "badred" : "normal");

updateCell.className = displayClass;

}

</script>

I am sure I am doing this wrong as I am getting a syntax error in the line

CODE:

displayClass = (text=="yes") ? : "okgreen" : (text=="error" ? "badred" : "normal");

I think it is me not understanding how to amalgamate the information above that is the problem so if I could ask your assistance again and my thanks in advance.

Best wishes : Dom
Copy linkTweet thisAlerts:
@rootJan 28.2017 — First off, check for typos and errors, opening the console and reviewing the log will help (F12 opens and closes the console, click on log to see output messages to the log)

You get the element you want to manipulate by reference and then apply to the property attributres className a name of a CSS class, the CSS is placed in the <head> of the document and when a class is set by its reference, the equivalent class="" is set with that className.

className is the javascript dom property for [B]class[/B], its much simpler to apply a class name to a dom element than use many lines of code to set various elements of the desired setting.

when this [B]displayClass = (text=="yes") ? : "okgreen" : (text=="error" ? "badred" : "normal"[/B] is evaluated, if the value of text = yes, then okgreen is returned to displayClass, if not the second part is evaluated and if the text = error then badred is returned to displayClass otherwise normal is returned to the displayClass.

displayClass is then used to set the .className property of the DIV or DOM element you are updating to set a green, red or transparent background colour based on what value text was set to.

Here is a demo:[code=html]<!DOCTYPE html>
<html>
<head>
<title>Radio</title>
<style>
.okgreen {
background-color: #7fff00;
color:#000080;
}
.normal {
background-colour: transparent;
}
.badred {
background-color: #ff0000;
color: #ffff00;
font-weight: bold;
}
</style>

<script>

function standard1( text ) {
updateCell = document.getElementById("standard1");
displayClass = (text=="yes") ? "okgreen" : (text=="error" ? "badred" : "normal");
console.log("> "+text);
updateCell.className = displayClass;
}
</script>
</head>
<body>
<form name="myDemoForm" method="post" action="javascript:;">
<div id="standard1"><p>This is the element that changes background colour</p></div>
<select size="1" name="question" onChange="standard1( this.options[this.selectedIndex].value );">
<option value="yes">Yes</option>
<option value="no" selected>No</option>

<option value="error" >Error</option>

</select>
</form>
</body>
</html>[/code]
×

Success!

Help @domparker spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...