Forums

WordPress › Support » How-To and Troubleshooting

Javascript file added to header.php but not working (3 posts)

  1. scdwb
    Member
    Posted 3 years ago #

    hello, if someone could help me out on this I would be so greatful.

    I have added this line of code to header.php of my theme,

    <script type="text/javascript" src="/wp-content/themes/re_theme/dhtmlgoodies_slider.js"></script>

    This points to my javascript file, I then have this code in a wordpress page:

    [RAW]
<script type="text/javascript">
function startPreview() {
  window.setInterval("add()", 500);
}

function add() {
  var calc_form=document.getElementById("calc");
  var t1 = check_num(calc_form.amount.value);
  var t2 = check_num(calc_form.month.value);
  var t = Math.round(t1 / 100 * 10) * t2;
  var tr = Math.round(t + t1);
  // next line just prevents 'NaN' from occasionally appearing
  if (isNaN(tr)) calc_form.answer.value = "";
    else calc_form.answer.value = tr;
  return;
}

function check_num(txt_num)  {
  var num = parseFloat(txt_num);
  return num;
}

window.onload = startPreview();
</script>

</head><body>

<div id="Sliders">
<div class="Slider">
<form name="calc" id="calc">
<span class="column-01"></span>
<span class="column-03-02"><label id="slider_target"></label></span>
<div class="clear">&nbsp;</div> 

<span class="column-01-2"></span>
<span class="column-03-02"><label id="slider_target2"></label></span>
<div class="clear">&nbsp;</div> 

<span class="column-01"></span>
<span class="column-03-02">how <span class="green">much</span>  do you want?</span>
<span class="column-05"><input type="text" name="amount" maxlength="5" size="3" value="2500"></span>
<span class="column-06">(max &pound;10,000)</span>
<div class="clear">&nbsp;</div>
<span class="column-01"></span>
<span class="column-03-02">how <span class="green">long</span>  do you want it for?</span>
<span class="column-05"><input type="text" name="month" maxlength="1" size="5" value="3"></span>
<span class="column-06">(max 6 months)</span>
<div class="clear">&nbsp;</div>
<span class="column-01"></span>
<span class="column-03-02"><span class="green">Total</span>  to repay</span>
<span class="column-05"><input type="text" name="answer" id="answer" size="10" value=""></span>
<div class="clear">&nbsp;</div> 

</form>
<div class="clear">&nbsp;</div> 

  <script type="text/javascript">
// Javascript for example 1
form_widget_amount_slider('slider_target',document.forms[0].amount,361,100,10000,"add(calc)");
form_widget_amount_slider('slider_target2',document.forms[0].month,305,1,6,"add(calc)");

</script>
[/RAW]

    The javascript I used within the blog works fine. as I am using the raw plugin. But instead of looking like this it looks like this. As you can see the maths calculation, which is the javascript direct from the post is working, but the sliders do not show. :-/. Please help.

    The external javascript file can be found here

    p.s. While developing the site I have password protected it. Please use these details to view :-)

    username: test
    password: testingtest

  2. scdwb
    Member
    Posted 3 years ago #

    Can any help with this? :-)

  3. dbmartin
    Member
    Posted 3 years ago #

    Something I noticed when checking the source code on your site is you have duplicate </head> and <body> tags. It appears right after this block of script:

    <script type="text/javascript">
function startPreview() {
  window.setInterval("add()", 500);
}

function add() {
  var calc_form=document.getElementById("calc");
  var t1 = check_num(calc_form.amount.value);
  var t2 = check_num(calc_form.month.value);
  var t = Math.round(t1 / 100 * 10) * t2;
  var tr = Math.round(t + t1);
  // next line just prevents 'NaN' from occasionally appearing
  if (isNaN(tr)) calc_form.answer.value = "";
    else calc_form.answer.value = tr;
  return;
}

function check_num(txt_num)  {
  var num = parseFloat(txt_num);
  return num;
}

window.onload = startPreview();
</script>

    </head><body>

    I would start with deleting those extraneous tags.

    Additionally, in the example site you gave a link to this script:

    <script type="text/javascript">
function startPreview() {
  window.setInterval("add()", 500);
}

function add() {
  var calc_form=document.getElementById("calc");
  var t1 = check_num(calc_form.amount.value);
  var t2 = check_num(calc_form.month.value);
  var t = Math.round(t1 / 100 * 10) * t2;
  var tr = Math.round(t + t1);
  // next line just prevents 'NaN' from occasionally appearing
  if (isNaN(tr)) calc_form.answer.value = "";
    else calc_form.answer.value = tr;
  return;
}

function check_num(txt_num)  {
  var num = parseFloat(txt_num);
  return num;
}

window.onload = startPreview();
</script>

    was in the <head></head> tags, but on your site, it's in the <body>.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags