HTML + Javascript document.write not working

Question

So I'm doing this for a summer class and I have to get this carpet calculator to display the result in a "Perform a document.write to display the results on a new html page." (quote taken straight from assignment). It says to use document.write and I grasp the concept of document.write after using some tutorials on w3 but when I try to apply it to my project, it has no effect on my web page.

Below is my code:

    <?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Oldstyle" type="text/css" />

<head>
<title>Tutorial Project 10</title>
</head>
<body>

<h1>Carpet Calculator</h1>

<form name = "carpet" action=" ">

</br>Enter the length of your room in feet</br><input name = "length" type = "text" />

</br>Enter the width of your room in feet</br><input name = "width" type = "text" />
</br>Typically an allowance is made for room irregularities and unavoidable waste.
</br>Enter the percent overage as an integer in the interval [0, 20]</br><input name = "overage" type = "text" />

</br></br><input name = "SqFt" type = "button" value = "Compute Square Feet  " onclick = "ComputeSquareFeet()" />

</br></br><input name = "SqYd" type = "button" value = "Compute Square Yards" onclick = "ComputeSquareYards()" />


</br></br><input type = "reset" value = "Clear" />

</form>

<script type="text/javascript">

         function ComputeSquareFeet()
        {  
           var SqFt = (carpet.length.value*carpet.width.value);
           carpet.SqFtResult.value = SqFt+(SqFt*(carpet.overage.value / 100));
           document.write(SqFtResult);
        }




         function ComputeSquareYards()
        {
           var SqYd = ((carpet.length.value/3)*(carpet.width.value/3));
           carpet.SqYdResult.value = SqYd+(SqYd*(carpet.overage.value / 100));
           document.write(SqYdResult);
        }


</script>

</body>
</html>

The page works like this, the user enters data into 3 boxes, the button is pressed which calls the function and at the end of that function, it performs document.write. However, after doing a bunch of trial and error, I concluded that my formulas were working and the function was being called but the document.write wasn't for some reason.

Any ideas on what I'm doing wrong? Thank you!

Edit: I had a text box that displayed the result of the function just to make sure it was working but once I switched to document.write, nothing seemed to work

@JaromandaX how would I fix that then? w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_write3 I don't see how it's done here is any different than mine — DrMoney
– DrMoney, Commented Jul 12, 2015 at 5:41

Nitesh Patel · Accepted Answer · 2015-07-12 05:54:58Z

1

Seems like you need to write this to a new HTML page; for example try calling the below function with your text:

function writeToNewPage(text) {
    var newPage = window.open("", "New Page","width=400, height=300, scrollbars=1, resizable=1");

    newPage.document.open();
    newPage.document.write(text);
    newPage.document.close();
}

You can't use document.write on the current page without wiping the whole page, and it seems the assignment question does actually say a new page.

answered Jul 12, 2015 at 5:54

Nitesh Patel

6313 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DrMoney Over a year ago

It says specifically to use document.write. I think my professor intends for the entire page to wiped and have just the answer left. However, I tried your code just to see if it would work but nothing happened. I think my problem might lie somewhere else while the document.write is fine. I had a text box that displayed the result of the function just to make sure it was working but once I switched to document.write, nothing seemed to work

Nitesh Patel Over a year ago

Not sure how you're going to replace the current page. If you're using Chrome or IE you can press F12 to bring up the developer toolbar and type document.write("test") into the console. You can see that it doesn't seem to do anything.

Nitesh Patel Over a year ago

Opening a new window should work, and you are using document.write. You might get a warning about a pop-up though.

Abhinav · Accepted Answer · 2015-07-12 05:47:37Z

0

It seems to me that the problem there is not really the document.write, but probably the way you are getting the data from the form.

It should be something like:

document.forms["formname"][fieldname].value;

Also to create a variabe do it like:

var SqYdResult=somthing;

Hope it helps

edited Jul 12, 2015 at 5:47

Abhinav

8,16812 gold badges51 silver badges92 bronze badges

answered Jul 12, 2015 at 5:42

João Ferreira

32 bronze badges

1 Comment

DrMoney Over a year ago

I can't figure out how to post my code in a comment, but I tried your suggestion but it isn't working

DrMoney · Accepted Answer · 2015-07-12 06:20:37Z

Turns out I was getting ahead of myself

 function ComputeSquareFeet()
{  
   var SqFt = (carpet.length.value*carpet.width.value);
   carpet.SqFtResult.value = SqFt+(SqFt*(carpet.overage.value / 100));
   document.write(SqFtResult);
}

needs to be

 function ComputeSquareFeet()
{  
   var SqFt = (carpet.length.value*carpet.width.value);
   var SqFtResult = SqFt+(SqFt*(carpet.overage.value / 100));
   document.write("Carpet needed in square feet: " + SqFtResult);
}

Because I wasn't declaring the variable it wasn't working. When I defined it I got the result I wanted.

Thank you all for your help!

Collectives™ on Stack Overflow

HTML + Javascript document.write not working

3 Answers 3

3 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Related