[SOLVED] JS not working with <!DOCTYPE html PUBLIC...... header!

unistake · August 6, 2009

I have a webpage with javascript and a html form in it, as seen in the code below, which works fine without using

 <!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">

on the top of the webpage.

I was hoping someone could point me in the right direction why my javascript would not work with this standard piece of code. Thanks.

The full page code that I am talking about is:

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript">
function calc(){
text = document.getElementById("text");

  selection = document.getElementsByName("typeofbet");

  for(i=0; i<selection.length; i++){
    if(selection[i].checked == true){
      var selected = selection[i].value;
    }
  }

  if(selected == "qualifier"){
      qualifier();
   }else{
    if(selected == "freesr"){
      sr();
    }else{
      if(selected == "freesnr"){
        snr();
      }
    }
  }
}

function qualifier (){
   	bcommission = 0;
lcommission = 5;
var stake = freebet.value;
   	var bodds = backodds.value;
   	var lodds = layodds.value;
backreturn = bodds * stake-(bcommission*((bodds-1)*stake)/100)-0;
  	laystake = backreturn / (lodds-lcommission/100);
   	liability = laystake * (lodds-1)+0.01;
layprofit = laystake * (100-lcommission)/100;
profitloss = (stake - layprofit);
   
text.innerHTML = 'In bookmaker, stake the team with £' + CurrencyFormatted(stake) + ' on odds of ' + CurrencyFormatted(bodds) + '<p> In Betfair, LAY the team with £' + CurrencyFormatted(laystake) + ' on odds of ' + CurrencyFormatted(lodds) + '<p> You will make a small loss of £' + CurrencyFormatted(profitloss) + ' to get the free bet amount of £' + CurrencyFormatted(stake)
}
   
function sr(){
text.innerHTML = 'this is the sr!'
}
   
function snr(){
text.innerHTML = 'this is the snr!'
}


function CurrencyFormatted(amount)
{
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
} 
</script>
</head>

<body>
      	<form name="calcform">
<table width="379" border="0" cellspacing="4" cellpadding="0">
  <tr>
    <td colspan="2"><img src="images/2.png" alt="" width="125" height="30"></td>
    <td width="204"> </td>
  </tr>
  <tr>
    <td width="33"> </td>
    <td width="142"><span class="style28">free bet £</span></td>
    <td><span class="style2">
      <input name="freebet" type="text" id="freebet" style=" border: 1px solid #EFEFEF; background-color:#FFF; height:25px;" size="15" />
    </span></td>
  </tr>
  <tr>
    <td> </td>
    <td><span class="style2">back odds</span></td>
    <td><input name="backodds" type="text" id="backodds" style=" border: 1px solid #EFEFEF; background-color:#D2E1E9; height:25px;" size="15" /></td>
  </tr>
  <tr>
    <td> </td>
    <td><span class="style5 style20">lay odds</span></td>
    <td><input name="layodds" type="text" id="layodds" style="border: 1px solid #EFEFEF; background-color:#EACBDB; height:25px" size="15" /></td>
  </tr>
  <tr>
    <td> </td>
    <td><span class="style6 style1">Type of Bet</span></td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td colspan="2"><span class="style6 style1">
      <input type="radio" name="typeofbet" value="qualifier" onClick="return calc();">
      qualifier
      <input type="radio" name="typeofbet" value="freesr" onClick="return calc();">
      stake-returned
      <input type="radio" name="typeofbet" value="freesnr" onClick="return calc();">
      stake-not-returned</span></td>
  </tr>
  <tr>
    <td colspan="2"><img src="images/3.png" width="110" height="30" /></td>
    <td><span class="style1"></span></td>
  </tr>
  <tr>
    <td> </td>
    <td colspan="2"><p> <span class="style1" id="text">this is text</span>
  
</p></td>
  </tr>
</table>

</form>

</body>
</html>

haku · August 6, 2009

getElementsByName() is causing your problems I think - it's not standard or cross-browser compatible, and I think the doctype may be causing it to not work.

unistake · August 6, 2009

thanks for the reply.

so is there an alternative to 'getElementsByName()' and also can I change the doctype to something other than what it is at the moment?

haku · August 7, 2009

You can change it to another doctype, but you aren't likely to find that helps much.

As for getting all the elements with the name you want, you can use a combination of getElementsByTagName and a loop:

// First select all the elements with the tag in question.
// You could use all elements on the page instead of doing this,
// but it would be very resource intensive and heavy.
targetElements = document.getElementsByTagName("div");

// Next loop through each of the found elements
for(var i=0; i < targetElements.length; i++)
{
  // if the element has the 'name' attribute that you were originall looking
  // for with getElementsByName, do whatever it is you want to do to it.
  if(targetElements[i].getAttribute("name") == 'some_name')
  {
    // do whatever it is you want to do to the element here ex:
    alert(targetElements[i]);
  }
}

unistake · August 11, 2009

Hi Haku,

thanks for that reply.

Would you mind explaining it further? I am not so sure what you mean - I am new to JS.. go easy on me!

Thanks

unistake · August 11, 2009

actually scrap that last post.

Is there another way to achieve the same result as I have made above?

Basically the user inputs numbers in a form, clicks one of three radio buttons, and depending on the radio button option calculates a couple of formulas and displays it on the same page without a re-load.

Thanks for the help

unistake · August 12, 2009

anyone got any idea?!

Thanks

KevinM1 · August 12, 2009

Just off the top of my head:

function calculate(radioButtonVal, textFieldVal /*, ... */, outputField){
   switch (radioButtonVal){
      case /* button 1 value */:
         // do first kind of calculation
         break;

      case /* button 2 value */:
         // do second kind of calculation
         break;

      case /* button 3 value */:
         // do third kind of calculation
         break;

      default:
         // report error
   }
}

window.onload = function(){
   var textVal1 = document.forms["formName"].elements["textField1"].value;
   //repeat for however many text field values you have

   var outputField = document.forms["formName"].elements["outputField"];

   var radios = document.forms["formName"].elements["radioButtonsName"];
   var numRadios = radios.length;

   for(var i = 0; i < numRadios; ++i){
      radios[i].onclick = calculate(this.value, textVal1 /* , any other text field values */, outputField);
   }
}

This is just a skeleton of the way I'd go about it. It won't work as-is, but it should give you more than a head start on figuring it out.

unistake · August 12, 2009

thanks for the heads up

unistake · August 13, 2009

i cant seem to get that loop to work, any more ideas on simpler scripts?!

dmcdivitt · August 13, 2009

I've never had a problem with getElementById. I was never able to get getElementByname to work very well. For the elements you want to denote, set the name and id tags the same all the time. If there is a form, you should always be able to access that by formname.elementname.value without having to use getElementById. There is no need to use the <!DOCTYPE declaration. I read an article to that effect which said it is ignored for the most part. Always use <head, </head, <body, and </body.

haku · August 13, 2009

Not sure where you got that, but doctypes are always read when used properly, and quite essential for cross-browser consistency. If they aren't read properly, it's because the person hasn't done it right (whitespace before the docytype, or putting it in the wrong place in their document).

getElementsByName doesn't work well because only certain browsers support it.

dmcdivitt · August 13, 2009

The best way to resolve cross browser support with <!DOCType is to not use it.

haku · August 13, 2009

Probably better not to give advice if you don't know what you are talking about mate.

dmcdivitt · August 13, 2009

There's a moralist in every crowd.

unistake · August 13, 2009

nice to have a bit on banter!

OK, I have changed all the names and ids to the same value 'typeofbet' but I still dont know where I have gone wrong!

my whole page is here in shell form! Please fill in the blanks. I have been working on this for over a week!

<head>
<script>
function calc(){
// if radio button value is 'qualifier' //
  if(value == "qualifier"){
      qualifier();
   }
   // if radio button value is 'sr' //
   else{
    if(value == "sr"){
      sr();
    }
   // if radio button value is 'snr' //
   else{
      if(value == "snr"){
        snr();
          }
 }
}
}
     
function qualifier (){
  	var stake = freebet.value;
   	var bodds = backodds.value;
   	var lodds = layodds.value;
result = ((stake * bodds) / lodds);
	text.innerHTML = 'the result is ' + (result)
} 
function sr(){
text.innerHTML = 'this is the sr!'
}
function snr(){
text.innerHTML = 'this is the snr!'
}
</script>
</head>
<body>
<form name="calcform" id="calcform">
<input name='freebet' type='text' value='25'/><br>
<input name='bodds' type='text' value='3.2'/><br>
<input name='lodds' type='text' value='3.3'/><br>
<input type='radio' name='typeofbet' id='typeofbet' value='qualifier' onclick='return calc();'><br>
<input type='radio' name='typeofbet' id='typeofbet' value='sr' onclick='return calc();'><br>
<input type='radio' name='typeofbet' id='typeofbet' value='snr' onclick='return calc();'><br>
<span id='text'>results displayed here</span>
</form>
</body>

Thank you so much

dmcdivitt · August 13, 2009

You are not setting the variable with the name "value". When "value" is used in the html element it is an attribute of the element. But you are using "value" as a named variable in javascript and not initializing it or assigning anything to it. I suggest changing the calc function as follows:

function calc(v){

if(v== "qualifier") qualifier();

else if (v== "sr") sr();

else if(v== "snr") snr();

}

change the HTML elements as follows:

Notice the use of double quotes and single quotes. It is best to use double quotes when assigning attributes within elements, and using single quotes where literals are needed.

The value attribute is no longer being set in the HTML element, but is being passed as an argument to the calc function. The onclick events do not need to return anything so remove the "return". You only need to have an event return a value if you want to kill it, preventing it from bubbling through to other events, and in that case you want to return FALSE.

Reduce the amount of stuff you type, yet keep it legible, since all must be sent to the client. Do not use comments which simply say what can easily be understood by looking at the code. Use comments to answer questions such as "why am I doing it this way" or quirks being circumvented.

unistake · August 13, 2009

thanks for the help div.

I have done all the changes, and there seems to be the same problem as before. It changes the 'sr' and 'snr' values but not the 'qualifier'. The variables are all being sent through - thats the only part im 100% sure on!

That part of the script now looks like:

function calc(v){
  if(v== "qualifier") qualifier();
  else if (v== "sr") sr();
  else if(v== "snr") snr();
}

function qualifier (){
   	
var stake = freebet.value;
   	var bodds = backodds.value;
   	var lodds = layodds.value;
total = (stake + bodds + lodds);
   
text.innerHTML = 'this is the total value ' + total
}

dmcdivitt · August 13, 2009

What is "text"? That is not a variable name. That is an attribute of one of your elements. You were making the same mistake with "value".

unistake · August 13, 2009

the script as above works for the 'sr' and 'snr'. As i believe it, "text" is for the div id for where the result is shown.

What would you recommend it to be instead of what is posted above?

KevinM1 · August 13, 2009

the script as above works for the 'sr' and 'snr'. As i believe it, "text" is for the div id for where the result is shown.

What would you recommend it to be instead of what is posted above?

The problem is that 'text' has no context within the body of that function. It doesn't exist in the function's scope. You need to get a hold of 'text' - either by using document.getElementById, or document['formName'].elements['text'] (where formName is the name of your form) - before you can start manipulating it.

dmcdivitt · August 13, 2009

You are using "text" as a variable. Somewhere in javascript you must have a statement saying:

var text = whatever;

Seeing "text" as an attribute inside one of the HTML elements does not also make it a javascript variable. If there was a div tag it might have the id of "xyz". To write to the innerHTML you would then use:

document.getElementById("xyz").innerHTML = "great happiness";

There's a difference between javascript and stuff you see inside HTML elements.

unistake · August 13, 2009

never mind guys i give up! there will be another way of what im trying to do

Cheers

Sign In

[SOLVED] JS not working with <!DOCTYPE html PUBLIC...... header!

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information