0

そこで、いくつかの JavaScript 関数を使用して Web ページを作成しました。

このページは Dreamweaver では完全に動作しますが、ブラウザ (Google Chrome と Firefox) で試してみると、JavaScript が一瞬点滅してからクリアされます。これがなぜなのか、まったくわかりません。

<body>
   <form name="myForm">
   <ol>
        <li>
        <h1> TILE CALCULATOR</h1>
        </li>

        <li>

            <label for="wall height">Wall height (cm)</label>
            <input type="text"  id="wall_height" />
        </li>

        <li>
            <label for="wall width">Wall Width (cm)</label>

            <input type="text"  id="wall_width" />
        </li>

        <li>
            <label for="tile height">Tile Height (cm)</label>
            <input type="text"  id="tile_height" />

        </li>
        <li>
            <label for="tile width">Tile Width (cm)</label>
            <input type="text"   id="tile_width" />
        </li>

        <button onclick="javascript:validate();"> Calculate </button>


</ol>
    </form>  

   <br />

<p id="result"></p>
<br />
<canvas id="myCanvas">

Your browser does not support this feature</canvas>
<br />
<br />

<script language="javascript" type="text/javascript">

//functoin to validate the inputs by the user 
//user can only enter a number and all fields must be filled
function validate()
{
    //first make sure canvas is clear
    clearCanvas()
    //take the inputs as variables
    var x = document.getElementById("tile_width").value;
    var y = document.getElementById("tile_height").value;
    var z = document.getElementById("wall_width").value;
    var i = document.getElementById("wall_height").value;
       //check if the user has entered nothing and alert if they have 
       if (x==null || x=="" || y==null || y=="" || z==null || z=="" || i==null || i=="")
    {
        alert("All the fields have to be filled out!");
        clearResult();
    }
    // check if the user has entered invalid values, only numbers can be entered
    if (isNaN(x) == true || isNaN(y) == true || isNaN(z) == true || isNaN(i) == true)
    {
        alert("Dimensions can only be numbers!");
        clearResult();
    }
    //check for negatives
    if (x <= 0 || y <= 0 || z <= 0 || i <= 0)
    {
        alert("invalid dimension input, positive non-zero values only");
        clearResult();
    }
    //if valid calculate tiles and print 
    else
    tileCalculator();
}
function tileCalculator()
{
    //take the input as variables
    var tileWidth = document.getElementById("tile_width").value;
    var tileHeight = document.getElementById("tile_height").value;
    var wallWidth = document.getElementById("wall_width").value;
    var wallHeight = document.getElementById("wall_height").value;
    //find the areas of the tile and the wall
    var tileArea = tileWidth * tileHeight;
    var wallArea = wallWidth * wallHeight;
    //divide these to find the number of tiles needed 
    var noOfTiles = (wallArea/tileArea);
    //prints the result of noOfTiles
    document.getElementById("result").innerHTML=" The number of Tiles you will need are : " + noOfTiles;

    //scalled tiles to the canvas width of your choice
    var scalledWidth = 500;
    var ratioHW = wallHeight/wallWidth;
    var scalledHeight = ratioHW*scalledWidth;
    //scaled tile sizes
    //scale the tiles to correct pixels
    var scalledTileWidth = (tileWidth/wallWidth)*scalledWidth;
    var scalledTileHeight = (tileHeight/wallHeight)*300;
    //finds the number of tiles needs in a row
    var noWidth = wallWidth/tileWidth;
    //number of tiles in a column 
    var noHeight = wallHeight/tileHeight;

    var canvas = document.getElementById("myCanvas");
    canvas.style.width=scalledWidth + "px";
    canvas.style.height=scalledHeight + "px";
    printWall(0,0,noWidth,scalledTileWidth,(scalledTileHeight/2),noHeight);

}

//print a tile given the position and dimensions
function printTile(x,y,tileWidth,tileHeight)
{
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillRect(x,y,tileWidth,tileHeight);
}
//prints one row of tiles given the starting position and number to be printed
function printTileRow(x,y,numberOfTiles,tileWidth,tileHeight)
{
    var start = 0;
    //loops upto number of tiles in a row 
    while (start < numberOfTiles)
    {
        //prints a tile each time
        printTile(x,y,tileWidth,tileHeight);

        //next brick position
        x = x + (tileWidth + 1); //  add a space between tiles here.
        start++;
    }
}

//prints the wall 
function printWall(x,y,numberOfTiles,tileWidth,tileHeight,numberOfRows)
{   
    //holds whether last row was shifted
    var shiftCount = 0; 
    //starting index
    var start = 0;
    //loop up adding a row until required number of rows
    while (start < numberOfRows)

    { 
       //prints half a tile at the start of each row
       printTile(0,y,(0.5 * tileWidth - 1),(tileHeight));
       //prints the row 
       printTileRow((x+shiftCount),y,numberOfTiles,tileWidth,tileHeight);
       //if shifted
       if (shiftCount > 0)
       {
           //was shifted last row
           shiftCount = 0;
       }
       else
       {
           //was not shifted last row
           shiftCount = shiftCount + (0.5*tileWidth);
       }
       start++;
       //start next row
       y = y + (tileHeight + 1);
    }
}

//clears the canvus each time the button is pressed
function clearCanvas()
{
    //reset canvus to 300 by 300 and clear
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext('2d');
    canvas.style.height="300px";
    canvas.style.width="300px";
    context.clearRect(0,0,300,300);
}
function clearResult()
{
    document.getElementById("result").innerHTML="";
}

</script> 
</body>

誰かが私をすぐに見てくれたら本当にありがたいです！ありがとう、

4

3 に答える 3

1

ボタンタグの代わりにフォームタグで使用onclick="javascript:validate();"してみて、「onclick」の代わりに「onsubmit」を使用してみてください

于 2013-05-16T03:32:01.193 に答える