I am a beginner at JavaScript and I have been working on this very simple project for a couple of days. It is supposed to allow you to calculate the area and perimeter of a rectangle, but despite how much I tweaked the code, it will not calculate when I enter numbers. It should just be a simple user interface that allows you to input into two text boxes:
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var width = parseFloat($("width").value);
var length = parseFloat($("length").value);
$("area").value = "";
$("perimeter").value = "";
if (isNaN(width) || width <= 0) {
alert("Width must be a valid number and greater than zero.");
}
else if (isNaN(length) || width <= 0) {
alert("Length must be a valid number and greater than zero.");
} else {
var area = width * length;
var perimeter = 2 * width + 2 * length;
$("area").value = area;
$("perimeter").value = perimeter;
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("length").focus();
}
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #333366; }
#content {
width: 450px;
margin: 10px auto;
padding: 5px 20px;
background: white;
border: thin solid black; }
#salesTax, #total {
color: black; }
#taxCalc label {
display: block;
width: 6em;
text-align: right;
padding-right: 1em;
float: left; }
#taxCalc input {
display: block;
float: left; }
#taxCalc br {
clear: left; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Area and Perimeter Calculator</title>
<link rel="stylesheet" type="text/css" href="sales_tax.css" />
<script type="text/javascript" src="sales_tax.js"></script>
</head>
<body>
<div id="content">
<h2>Area and Perimeter Calculator</h2>
<p>Enter the values below and click "Calculate".</p>
<div id="taxCalc">
<label for="length">Length:</label>
<input type="text" id="length" /><br />
<label for="width">Width:</label>
<input type="text" id="width" /><br />
<label for="area">Area:</label>
<input type="text" id="area" disabled="disabled" /><br />
<label for="perimeter">Perimeter:</label>
<input type="text" id="total" disabled="disabled" /><br />
<label> </label>
<input type="button" id="calculate" value="Calculate" /><br />
</div>
</div>
</body>
</html>
If anyone can please help even a little, I would genuinely appreciate it,
Thank you.
There were two problems with your script (Well technically three, but I think the missing v at the beginning was a copy/paste mistake.
1st: The window.onload functions needs to be outside calculate_click. It never gets called, because the calculate_click never gets called.
2nd: The input for perimeter, had id="total", but you were calling $("perimeter"). This is fixed in the jsfiddle.
Here is a working form.
Related
I have an HTML form that will contain predefined values that the user will have to confirm by editing their contents, if needed.
I would like to perform a constant check so that the color background of every cell changes accordingly to its content.
For example, if the cell is empty, its background should be red. Later on I will add more check, for example if it contains the string "MISSING VALUE" it should be yellow and so on.
This is an example of my form and the code I'm trying to execute:
<!DOCTYPE html>
<html>
<style type="text/css">
table.first {
display: table;
table-layout: auto;
float: none margin-left: auto;
margin-right: auto;
}
.table_element {
display: table-cell;
}
</style>
<table class="first">
<div class="table_element">
<p style="text-align: center;">First Name:<br><input name="import_date_visit" id="subEmail" type="text" required size="25" onchange="checkFilled();" value="Claudio"></p>
</div>
<div class="table_element">
<p style="text-align: center;">Last name:<br><input name="import_date_visit" type="text" required size="25" onchange="checkFilled();" value="MISSING VALUE"></p>
</div>
</table>
<script type="text/javascript">
function checkFilled() {
var inputVal = document.getElementsByClassName("table_element");
for (var i = 0; i < inputVal.length; i++) {
document.writeln((i + 1) + ": " + inputVal[i].value);
}
for (var i = 0; i < inputVal.length; i++) {
if (inputVal[i].value == "") {
inputVal[i].style.backgroundColor = "red";
} else {
inputVal[i].style.backgroundColor = "white";
}
}
}
checkFilled();
</script>
</html>
What I don't understand is how to get the value of the string inside the div element. As you can see, I'm trying to print it as a debug, and I'm expecting to get the values Claudio and MISSING VALUE, but all I get is undefined. I suppose it should be pretty straightforward to get the content of a cell, so I assume I'm missing something very obvious.
Thanks for the help.
First find input element inside your div element and then use value property on it.
function checkFilled() {
const divEle = document.getElementsByClassName("table_element");
for(let i = 0; i < divEle.length; i++) {
const inputVal = divEle[i].children[0].children[1];
if (inputVal.value == "") {
inputVal.style.backgroundColor = "red";
} else if (inputVal.value == "MISSING VALUE") {
inputVal.style.backgroundColor = "green";
}
}
}
checkFilled();
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table.first{
display: table;
table-layout: auto;
float:none
margin-left: auto;
margin-right: auto;
}
.table_element{
display: table-cell;
}
</style>
</head>
<body>
<table class="first">
<div class="table_element">
<p style="text-align: center;">First Name:<br>
<input name="import_date_visit" id="subEmail" type="text" required size="25" onchange="checkFilled();" value="Claudio" />
</p>
</div>
<div class="table_element">
<p style="text-align: center;">Last name:<br><input name="import_date_visit" type="text" required size="25" onchange="checkFilled();" value="MISSING VALUE" /></p>
</div>
</table>
</body>
</html>
Firstly, you should always have a body element. Whenever you create anew HTML document, you should first paste in the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Scripts and stylesheets should go into the head section, and any content that should be visible to the user in to the body section. <meta charset="utf-8"> should be always present - else non-ASCII characters will not be rendered correctly. Change utf-8 to whatever encoding you use in your editor.
Secondly, inputVal[i].value tries to access the value property of the p element in side .table_element - but paragraphs don't have a value, so you get undefined.
Thirdly, document.write and document.writeln should not be used - if you want to show something to the user, write it into a HTML element, and if you want to print something for debugging purposes, use console.log(...).
Lastly, div's are not valid children of a table - only thead, tbody and tr are.
To find the input elements, you can use document.querySelectorAll. Following the working, modern code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table.first {
display: table;
table-layout: auto;
float: none;
margin-left: auto;
margin-right: auto;
}
.table_element {
display: table-cell;
}
</style>
<script type="text/javascript">
function checkFilled() {
let inputElements = document.querySelectorAll(".table_element input");
let outputElement = document.querySelector("#output");
outputElement.innerHTML = "You entered : ";
for (let [index, inputElement] of inputElements.entries()) {
outputElement.innerHTML += " " + (index + 1) + " " + inputElement.value;
if (inputElement.value == "") {
inputElement.style = "background-color: red;";
} else {
inputElement.style = "background-color: green;";
}
}
}
window.addEventListener("load", checkFilled);
</script>
</head>
<body>
<div class="table_element">
<p style="text-align: center;">First Name :</p>
<input name="import_date_visit" id="subEmail" type="text" required size="25" oninput="checkFilled();" value="Claudio">
</div>
<div class="table_element">
<p style="text-align: center;">Last name :</p>
<input name="import_date_visit" type="text" required size="25" oninput="checkFilled();" value="MISSING VALUE">
</div>
<p id="output">You entered : nothing yet</p>
</body>
</html>
To start off I'm terrible at Js and super new at it. I'm trying to make a random image pop up when the site goes to a 404. I can't tell if my website is actually running the code or not because console.log wasn't working. Because of that I took all my CSS and js and put it all into the same HTML file to see if that was the problem (it wasn't) Any help is much appreciated :)
HTML:
<html>
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<div id="getMeme()"></div>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
document.getElementById("result").onload = '<img src="' + meme[pp] + '" />';
}
</script>
</html>
Using your code, you would need to ensure the function getMeme is called/invoked. Furthermore, you would need to update the function to modify the innerHTML of the element with id result instead of assigning to it's event handler onload.
See demo below:
I've included a console.log for debugging purposes on stackoverflow as images shared in the question are not available.
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<span id="result"></span>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
console.log("chose meme",meme[pp]); //line included for debugging purposes on stackoverflow as images shared in question are not available
//update `innerHTML` of target element
document.getElementById("result").innerHTML = '<img src="' + meme[pp] + '" />';
}
//call function to getMeme at the end of the page
getMeme();
</script>
</body>
</html>
I am not an expert in HTML, CSS, or JavaScript, but I have this website that needs to be responsive on all devices. However, it does not seem like it is working for some reason and instead creates major gaps of white space when I view the website on a mobile web browser:
Here is the code for it:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em verdana, arial, helvetica, sans-serif;
line-height: 0px;
}
h1,h2 {
font-size: 2em;
color: #f00;
text-align: center;
text-shadow: 0 0 0.06em #000,0 0 0.12em #000;
}
.af-textWrap {
display: block;
text-align: center;
color: #b7b7b7;
}
.af-element {
text-align: center;
}
#awf_field-90534028,
#awf_field-90534029 {
display: block;
width: 98%;
max-width: 28.125em;
margin: auto;
text-align: left;
}
.image {
display: block;
width: 98%;
max-width: 30em;
height: auto;
margin: auto;
}
</style>
</head>
<body>
<div id="worked"></div>
<script src="https://fast.wistia.com/embed/medias/cj7247tp29.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_cj7247tp29 videoFoam=true" style="height:100%;width:100%"> </div></div></div>
<h1>Offer Ends In:</h1>
<h2 id="time"></h2>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<input name="meta_web_form_id" type="hidden" value="604218668">
<input name="meta_split_id" type="hidden" value="">
<input name="listname" type="hidden" value="awlist4661276">
<input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true">
<input name="meta_adtracking" type="hidden" value="My_Web_Form">
<input name="meta_message" type="hidden" value="1">
<input name="meta_required" type="hidden" value="name,email">
<input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email...">
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap">
<input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name...">
</div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap">
<input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email...">
</div>
</div>
<div class="af-element buttonContainer">
<input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/>
</div>
<div class="af-element privacyPolicy">
<p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="">
</div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
<script>
(function() {
'use strict';
var handler = function() {
if (--sec < 0) {
sec = 59;
if (--min < 0) {
min = 0;
sec = 0;
}
}
var min1 = '0' + min + 'm';
var min2 = min + 'm';
var sec1 = '0' + sec + 's';
var sec2 = sec + 's';
var col = ':';
document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
}());
</script>
</body>
</html>
Looks like your iframe is injected by JavaScript so I personally suggest adding a setInterval() to your code to monitor the iframe element. Once the iframe element is available, get the body in the iframe and set it's margin to 0.
$(function() {
$('#test').append('<iframe src="http://www.w3schools.com"></iframe>');
var timer = setInterval(function() {
$('iframe').load( function() {
$('iframe').contents().find("head").append($("<style type='text/css'>body{margin:0;}</style>"));
clearInterval( timer ); // Clear the interval
});
}, 10);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
input[type="text"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
input[type="button"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>2-DO 2DAY</title>
</head>
<body>
<center>
<h1><font size="7" color="1E00FF">2-DO 2DAY</font></h1>
<br/>
<p><font size="8" color="5572FF"><em>What To Do Today?</em></font></p>
<br/>
<br/>
<input type="text" id="box" value="Click To Add Task"/>
<br/>
<br/>
<input type="button" value="Add Task" onclick="addItem();"/>
<br/>
<div id="list"></div>
</center>
</body>
</html>
basically all this does is when my button is pressed, it gets information from the box that you type into then adds it to a list. So yeah now i will type a bunch of random words because it says this is too much code and not enough words.
a bat named Jeff flew into the whale blubber to clean himself.
Add <br> to your function as follows:
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value + '<br><br>';
document.getElementById("list").appendChild(newItem);
}
I think to achieve what you want you actually need to attach two <br>s. Be also aware of correct use of break tag. In HTML break is <br> in XHTML is <br />.
Run the code snippet below to see it in action.
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value + '<br><br>';
document.getElementById("list").appendChild(newItem);
}
input[type="text"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
input[type="button"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
<center>
<h1><font size="7" color="1E00FF">2-DO 2DAY</font></h1>
<br/>
<p><font size="8" color="5572FF"><em>What To Do Today?</em></font>
</p>
<br/>
<br/>
<input type="text" id="box" value="Click To Add Task" />
<br/>
<br/>
<input type="button" value="Add Task" onclick="addItem();" />
<br/>
<div id="list"></div>
</center>
Adding line breaks to the end of the appended item is a BAD suggestion - yes it works but you are adding the line-breaks for the single purpose of spacing displayed content. Better to put the appended items in a semantically correct block level element such as a <p> (or apply css to an inline level element display:block) and then add margins to provide the spacing:
function addItem() {
var newItem = document.createElement("p");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
//css
#list p{margin:15px 0}
also - just for correctness -you are appending an item to a div with an id of "list" - but this is not a list. Would suggest either changing the name to reduce confusion about a div being a "list" or forget about creating elements that are appended into the div - and just create an actual list and all you have to do is append <li>'s to that list.
function addItem() {
var newItem = document.createElement("li");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
//html
<ul id='list'></ul>
//css
#list li{display:block; margin:15px 0}
Try it like this:
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.classList.add('item');
document.getElementById("list").appendChild(newItem);
}
input[type="text"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
input[type="button"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
.item::after {
content: "\A\A";
white-space: pre;
}
<!DOCTYPE html>
<html>
<head>
<title>2-DO 2DAY</title>
</head>
<body>
<center>
<h1><font size="7" color="1E00FF">2-DO 2DAY</font></h1>
<br/>
<p><font size="8" color="5572FF"><em>What To Do Today?</em></font></p>
<br/>
<br/>
<input type="text" id="box" value="Click To Add Task"/>
<br/>
<br/>
<input type="button" value="Add Task" onclick="addItem();"/>
<br/>
<div id="list"></div>
</center>
</body>
</html>
So all you need is to add a class item to the element and add an pseudo class to item with the content of a line break.
My Classic ASP cart page uses divs for a quantity selector within a form:
<form action="/update-cart/" method="post">
<div class="quantity-selector detail-info-entry">
<div class="detail-info-entry-title">Quantity</div>
<div class="entry number-minus"> </div>
<div class="entry number">1</div>
<div class="entry number-plus"> </div>
</div>
</div>
</form>
when - or + is clicked the 1 will update as expected. the code to do this is this:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
});
What is the easiest way to post the content of the div with class "number" above when a form is submitted. Do i use:
<input type="hidden" id="Num" name="Num" value="" />
Or another way. Either way, how can this be done easily as I cannot get the variable "newVal" to populate the hidden field.
Thanks
This demo has 2 features of note.
The following are done with HTML and inline JS (e.g. onchange='...)
<input>s .number-minus and number-plus
<output> .number displays the sum of .number-minus and .number-plus
As requested, the sum of .number-minus and .number-plus is stored in a <input [hidden]> named .secret. This value was derived from <output> value by using jQuery (overkill IMO). `
$(function() {
$('#pos, #neg').on('change', function(event) {
var cnt = $('#counter').val();
$('#secret').val(cnt);
console.log('Secret: ' + secret.value);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript/jquery onChange function for div.text to update form hidden field value</title>
<meta name="description" content="SO33312004">
<style>
.detail-info-entry-title,
#pos,
#neg {
font-variant: small-caps;
}
.entry {
padding: 3px;
margin: 0 5px;
width: 48px;
line-height: 1.6;
border: 2px solid #00E;
border-radius: 8px;
display: table-cell;
}
#counter {
font-weight: 900;
margin: auto;
display: table-cell;
height: 24px;
}
#form33312004 {
color: #0CF;
background: hsla(180, 100%, 10%, 1);
width: 33%;
height: 30%;
text-align: center;
vertical-align: middle;
display: table-row;
}
.field {
width: 50px;
display: table-cell;
}
footer {
font-size: .75em;
text-align: center;
}
</style>
</head>
<!--http://stackoverflow.com/questions/33312004/javascript-jquery-onchange-function-for-div-text-to-update-form-hidden-field-val-->
<body>
<form id="form33312004" submit="return false" oninput="counter.value = parseInt(pos.value, 10) - parseInt(neg.value, 10)">
<fieldset class="quantity-selector detail-info-entry">
<legend class="detail-info-entry-title">Quantity</legend>
<div class="field">
<input type="number" id="pos" min="0" max="999" step="any" value="0" class="entry number-plus">
<label for="pos">Positive</label>
</div>
<output for='pos neg' id="counter" name="counter" class="entry number">0</output>
<div class="field">
<input type="number" id="neg" min="0" max="999" step="any" value="0" class="entry number-minus">
<label for="neg">Negative</label>
</div>
</fieldset>
<input id="secret" type="hidden">
</form>
<div class="field">
<footer>Observe the hidden input's value thru
<br/>the console. (<b>F12</b> then the <b>Console</b> tab).</footer>
<script sr="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</body>
</html>
With pure JS:
document.getElementById("Num").value = < variable name >
With jQuery(not 100% sure)
$("Num").value(< variable name>)
So I solved the problem myself.
I added the following line:
$("#Num").val(newVal);
To both the jquery functions for the + and - divs as follows:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
$("#Num").val(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
$("#Num").val(newVal);
});
I am sure I had tried this but after thought I may have omitted the $ at the beginning. Always something simple in the end