Java Code Issues: DOM Manipulation

October 8, 2011

Javascript simulation of rolling of a dice

Write Javascript code to simulate the rolling of a dice. When the user clicks a button, the result should be the simulation of a dice - a value between 1 to 6 is displayed in the String, "Your roll of the dice displayed 3"

Hint: Math.random(), document.getElementById(), innerHTML, onclick event

Solution


<html>
<head>
<script type="text/javascript">

var rollDice = function() {
   var diceElementNode = document.getElementById("diceValue");
   var diceElementNodeChildren = diceElementNode.childNodes;

   if (diceElementNodeChildren[0] != null) {
      diceElementNodeChildren[0].nodeValue = "The dice value is " + Math.ceil((Math.random() * 6));
   } else {
      var diceTextNode = document.createTextNode("");
      diceTextNode.nodeValue ="The dice value is " + Math.ceil((Math.random() * 6));
      diceElementNode.appendChild(diceTextNode);
   }
}

window.onload = function() {
   document.getElementById("diceButton").onclick=rollDice;
}

</script>
</head>
<body>
<button id="diceButton">Roll Dice</button>
<div id="diceValue"></div>

</body>
</html>

May 8, 2011

Javascript DOM Manipulation

Write Javascript code to manipulate a webpage using DOM manipulation, to do the following,
- click a button to simulate rolling of a dice ( use Math.random() )
- click of a button to add more fields to a form/add a different textfield/label pair based on selection of 2 possible options on a radio button

Solution


<html>
  <head>
    <script type="text/javascript">

    var rollDice = function() {
        var diceElementNode = document.getElementById("diceValue");
 
        diceElementNode.innerHTML = "The dice value is " + 
                           Math.ceil((Math.random() * 6));
    }

    var addAddressFields = function() {
        var formElementNode = document.getElementById("formElement");

        var streetAddressNode = document.createElement("input");
 
        var typeAttribStreetAddress = document.createAttribute("type");
        typeAttribStreetAddress.nodeValue="text";
        streetAddressNode.setAttributeNode(typeAttribStreetAddress);
 
        var nameAttribStreetAddress = document.createAttribute("name");
        nameAttribStreetAddress.nodeValue="street";
        streetAddressNode.setAttributeNode(nameAttribStreetAddress);

        formElementNode.appendChild(document.createTextNode("Street: "));
        formElementNode.appendChild(streetAddressNode);

        formElementNode.appendChild(document.createElement("br"));

        var zipNode = document.createElement("input");
        var typeAttribZip = document.createAttribute("type");
        typeAttribZip.nodeValue="text";
        zipNode.setAttributeNode(typeAttribZip);
        formElementNode.appendChild(document.createTextNode("Zip Code: "));
        formElementNode.appendChild(zipNode);
        formElementNode.appendChild(document.createElement("br"));
        document.getElementById("addressButton").disabled=true;
    }

    window.onload = function() {
        document.getElementById("diceButton").onclick=rollDice;
        document.getElementById("addressButton").onclick=addAddressFields;
    }

    </script>
  </head>
  <body>
    <br/>

    <button id="diceButton">Roll Dice</button>
    <div id="diceValue"></div>

    <br/>
    <br/>

    <form id="formElement">
      First Name: <input type="text" name="firstname"/><br/>
      Last Name: <input type="text" name="lastname"/><br/>
      <button id="addressButton">Click to input address</button><br/>
    </form>

  </body>
</html>

Java Code Issues

Pages

October 8, 2011

Javascript simulation of rolling of a dice

May 8, 2011

Javascript DOM Manipulation

Popular Posts