JavaScript Inline Failures

Question

JavaScript Inline Failures

Having trouble with this script? It seems to be working on fiddle but not locally. Can someone test it out and see if it works for them?

<HTML>

<HEAD><TITLE>Server Disk Alert</TITLE>
<script type="text/javascript" src="../../../Backup/2012/Web Projects/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

document.ready(function(){
var widthval = parseInt($('.item').eq(0).text(), 10);
var $hr = $('hr').eq(0);
alert(widthval);
$hr.width(widthval);

if (widthval > 90) {
    $hr.css('background-color', 'red');}

});

</script>

</HEAD>

<BODY BGCOLOR="#EFEFFF">


<TABLE id="table_id" BORDER="1" CELLPADDING="2" CELLSPACING="2">
<TR>
 <TH COLSPAN="5" ALIGN="CENTER">Critical Server Disk Space</TH>
</TR>
<TR>
 <TH>Server</TH>
 <TH>Drive</TH>
 <TH>Percent Free Space</TH>
 <TH>Size Free Space</TH>
 <TH>Status</TH>
</TR>


<TR>
 <TD>%server%</TD>
 <TD>%drive%</TD>
 <TD class="item">50%</TD>
 <TD>%fspace%</TD>
 <TD width=200 style="border: 2px solid silver;padding:none">
 <hr style="color:#c00;background-color:blue;height:15px; border:none; margin:0;" align="left"/> </TD>
</TR>
<TR>

</TABLE>

</BODY>
</HTML>

Check out the jsfiddle link to see what I'm trying to achieve.
http://jsfiddle.net/XhxkX/7/

jquery html css progress-bar

Answer 1

Answer №1

The reason your code is not functioning properly is due to the combination of regular JavaScript DOM methods and jQuery.

Try using the following revised code:

var width = parseInt($('.item').eq(0).text(), 10);
var $hr = $('hr').eq(0);

$hr.width(width);

if (width > 90) {
    $hr.css('background-color', 'red');
}

Check out the live demonstration here: http://jsfiddle.net/XhxkX/11/

Furthermore, I noticed a couple of invalid HTML tags (<LPFOOTER> and <LPHEADER>) within your code. It seems like these tags are misplaced and one of them is missing an opening tag. It would be beneficial to update your HTML according to current standards before proceeding with any further modifications.

Answer 2

The reason your code is not functioning properly is due to the combination of regular JavaScript DOM methods and jQuery.

Try using the following revised code:

var width = parseInt($('.item').eq(0).text(), 10);
var $hr = $('hr').eq(0);

$hr.width(width);

if (width > 90) {
    $hr.css('background-color', 'red');
}

Check out the live demonstration here: http://jsfiddle.net/XhxkX/11/

Furthermore, I noticed a couple of invalid HTML tags (<LPFOOTER> and <LPHEADER>) within your code. It seems like these tags are misplaced and one of them is missing an opening tag. It would be beneficial to update your HTML according to current standards before proceeding with any further modifications.

Answer 3

Answer №2

$(document).querySelectorAll("hr")[0].style.width = widthValue;

It should actually be:

document.querySelectorAll("hr")[0].style.width = widthValue;

Answer 4

$(document).querySelectorAll("hr")[0].style.width = widthValue;

It should actually be:

document.querySelectorAll("hr")[0].style.width = widthValue;

Answer 5

Answer №3

Give this a shot:

<HEAD><TITLE>Server Disk Alert</TITLE>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="../../../Backup/2012/Web Projects/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var widthValue = document.getElementsByClassName("item")[0].innerText;
document.getElementsByTagName("hr")[0].style.width = widthValue;

if (parseInt(widthValue, 10) > 90) {
    document.getElementsByTagName("hr")[0].style.backgroundColor = "red";
}

});
</script>
</HEAD>

Answer 6

Give this a shot:

<HEAD><TITLE>Server Disk Alert</TITLE>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="../../../Backup/2012/Web Projects/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var widthValue = document.getElementsByClassName("item")[0].innerText;
document.getElementsByTagName("hr")[0].style.width = widthValue;

if (parseInt(widthValue, 10) > 90) {
    document.getElementsByTagName("hr")[0].style.backgroundColor = "red";
}

});
</script>
</HEAD>

Answer 7

Answer №4

One issue you might be facing is the combination of javascript and jquery

Try implementing this solution instead:

 $(document).ready(function(){
var widthValue = $(".item").text();
$("hr").css("width",widthValue)
if (parseInt(widthValue, 10) > 90) {
   $("hr").css("backgroundColor","red");
}
});

Answer 8

One issue you might be facing is the combination of javascript and jquery

Try implementing this solution instead:

 $(document).ready(function(){
var widthValue = $(".item").text();
$("hr").css("width",widthValue)
if (parseInt(widthValue, 10) > 90) {
   $("hr").css("backgroundColor","red");
}
});

Answer 9

Answer №5

In order to demonstrate how to access and modify DOM elements, I utilized two distinct methods. Hopefully, this will provide some clarity on the subject.

   <script type="text/javascript">

$(document).ready(function(){
var widthValue = parseInt($('.item').eq(0).text());
$('hr').eq(0).css('width',widthValue) ;

if (parseInt((widthValue.replace('%','')/10)* 10) > 90) {
   $('hr').eq(0).css({'background-color':'red'});
}

});

Answer 10

In order to demonstrate how to access and modify DOM elements, I utilized two distinct methods. Hopefully, this will provide some clarity on the subject.

   <script type="text/javascript">

$(document).ready(function(){
var widthValue = parseInt($('.item').eq(0).text());
$('hr').eq(0).css('width',widthValue) ;

if (parseInt((widthValue.replace('%','')/10)* 10) > 90) {
   $('hr').eq(0).css({'background-color':'red'});
}

});

Answer 11

Answer №6

Finally cracked it! Huge shoutout to an old pal who guided me through the process.. here's the secret code:

<!DOCTYPE html>
<html>
    <head>
        <title>Critical Server Disk Space</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                $('.bar').each(function(i){

                    var width = parseInt($('.item').eq(i).text(), 10);
                    var hr = $(this).eq(i);

                    $(this).width(width);

                    if(width >= 90){
                        $(this).css('background-color', 'red');
                    }
                });

            });

            //window.onload = init();
        </script>
        <style type="text/css>>
            hr{
                border:none;
                background:blue;
                height:15px;
                margin:0px;     
                text-align:left;
            }
            .border{border:1px solid #CCC; padding:0px; width:100px;background:#FFF;}
        </style>
    </head>
    <BODY BGCOLOR="#EFEFFF" >
        <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="2">
            <TR>
             <TH COLSPAN="5" ALIGN="CENTER">Critical Server Disk Space</TH>
            </TR>
            <TR>
             <TH>Server</TH>
             <TH>Drive</TH>
             <TH>Percent Free Space</TH>
             <TH>Size Free Space</TH>
             <TH>Status</TH>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">50 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">30 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">95 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">80 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
        </TABLE>
    </BODY>
</HTML>
</html>

Answer 12

Finally cracked it! Huge shoutout to an old pal who guided me through the process.. here's the secret code:

<!DOCTYPE html>
<html>
    <head>
        <title>Critical Server Disk Space</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                $('.bar').each(function(i){

                    var width = parseInt($('.item').eq(i).text(), 10);
                    var hr = $(this).eq(i);

                    $(this).width(width);

                    if(width >= 90){
                        $(this).css('background-color', 'red');
                    }
                });

            });

            //window.onload = init();
        </script>
        <style type="text/css>>
            hr{
                border:none;
                background:blue;
                height:15px;
                margin:0px;     
                text-align:left;
            }
            .border{border:1px solid #CCC; padding:0px; width:100px;background:#FFF;}
        </style>
    </head>
    <BODY BGCOLOR="#EFEFFF" >
        <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="2">
            <TR>
             <TH COLSPAN="5" ALIGN="CENTER">Critical Server Disk Space</TH>
            </TR>
            <TR>
             <TH>Server</TH>
             <TH>Drive</TH>
             <TH>Percent Free Space</TH>
             <TH>Size Free Space</TH>
             <TH>Status</TH>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">50 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">30 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">95 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">80 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
        </TABLE>
    </BODY>
</HTML>
</html>

JavaScript Inline Failures

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Restricting the character count

A error was encountered stating that the formValidation function is not defined when the HTML form element is submitted

Conceal the main div when the nested div does not contain any content

Step-by-step guide to implementing a sticky header while scrolling

Clicking on a React component will result in highlighting

How can I correctly link and open a PDF file in HTML without an extension provided in the filename?

Personalized CSS for Modifying Highlight Color of Main Menu when Selected on WEN Associate Theme

Is there a way to prevent my navbar from breaking buttons on mobile devices?

What is the method for utilizing script bundles in pure HTML (not cshtml)?

Creating Functions with HTML, CSS, and Javascript

Sending JSON data from SpringMVC to Java server

Distribute uniform width among child elements using CSS styling

The navigation bar isn't properly aligned with the image contained within

Move the background image by scrolling it

Integrating an Interactive Map with PHP

Positioning child divs using CSS

Blogger Extension - Cross Domain Communication

What is preventing images from displaying in my slider within baguetteBox?

Ways to retrieve the content and characteristics of a span element

Ways to extract information from a website using the data within a span element