SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fundamental Code ReUse

    I created some pretty fun and simple forms today, mainly focusing on design and layout with some JavaScript/DOM type behaviors.

    Worked great, then I duplicated the bottom form.

    The calculations do not work in the bottom form. What do I need to do to make the function reusable? Thanks in advance!

    <script type="text/javascript">
    function ConjunctionJunction(){
    var strInputSize = document.getElementById("inputSize").value;
    strInputSize = strInputSize * 0.03937 + " inches"; // 0.03937 is is inches the length of 1mm.

    var writeToElement = document.getElementById("WriteCalculation");
    writeToElement.value = strInputSize;
    }
    </script>
    </head>
    <body>

    <div>
    <div id="container">
    <form>
    <fieldset>
    <legend> &nbsp;SMC Calculator&nbsp; </legend>
    <h2>Convert Millimeters to Inches</h2>
    <label for="inputSize">Number of millimeters</label>
    <input type="text" size="30" id="inputSize"> <input class="red" type="button" onclick="ConjunctionJunction();" value="Convert to Inches"><br/>
    <label for="WriteCalculation">Number of inches</label>
    <input type="text" size="30" id="WriteCalculation"><br/>
    </fieldset>
    </form>
    </div>
    </div>
    <br/>
    <br/>

    <div>
    <div id="container">
    <form style="margin: 12px;">
    <fieldset>
    <legend> &nbsp;SMC Calculator&nbsp; </legend>
    <h2>Convert Millimeters to Inches</h2>
    <label for="inputSize">Number of millimeters</label>
    <input type="text" size="30" id="inputSize"> <input class="red" type="button" onclick="ConjunctionJunction();" value="Convert to Inches"><br/>
    <label for="WriteCalculation">Number of inches</label>
    <input type="text" size="30" id="WriteCalculation"><br/>
    </fieldset>
    </form>
    </div>
    </div>

  2. #2
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The id attribute must be unique, within a document.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I will take your word on that. I have reID'ed the code.

    But I guess aren't I going to have to do that "this" keyword technique in javascript to actually get either form to work on only ITSELF?

    Thank you.

    <script type="text/javascript">
    function ConjunctionJunction(){
    var strInputSize = document.getElementById("inputSize").value;
    strInputSize = strInputSize * 0.03937 + " inches"; // 0.03937 is is inches the length of 1mm.

    var writeToElement = document.getElementById("WriteCalculation");
    writeToElement.value = strInputSize;
    }
    </script>
    </head>
    <body>

    <div>
    <div id="container">
    <form>
    <fieldset>
    <legend> &nbsp;SMC Calculator&nbsp; </legend>
    <h2>Convert Millimeters to Inches</h2>
    <label for="inputSize">Number of millimeters</label>
    <input type="text" size="30" id="inputSize"> <input class="red" type="button" onclick="ConjunctionJunction();" value="Convert to Inches"><br/>
    <label for="WriteCalculation">Number of inches</label>
    <input type="text" size="30" id="WriteCalculation"><br/>
    </fieldset>
    </form>
    </div>
    </div>
    <br/>
    <br/>

    <div>
    <div id="container2">
    <form style="margin: 12px;">
    <fieldset>
    <legend> &nbsp;SMC Calculator&nbsp; </legend>
    <h2>Convert Millimeters to Inches</h2>
    <label for="inputSize2">Number of millimeters</label>
    <input type="text" size="30" id="inputSize2"> <input class="red" type="button" onclick="ConjunctionJunction();" value="Convert to Inches"><br/>
    <label for="WriteCalculation2">Number of inches</label>
    <input type="text" size="30" id="WriteCalculation2"><br/>
    </fieldset>
    </form>
    </div>
    </div>

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone help me with this or point me in a specific direction?

    I would really, really, like to get better at code reuse.

    Thanks
    d~


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •