Jump to content

citizen2

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by citizen2

    Calling a Function with Arguments with a button

    in JavaScript

    Posted

    ok so i figured it out, Ingolme really helped me get started. here is what i have now and does exactly what i want, also, i think it looks pretty clean:

     

    <!DOCTYPE html>
    <html>
    <head>
    <title>Javascript and buttons</title>
    <script>
    function updateTxt(inputID, outputID){
    var inputElement = document.getElementById(inputID);
    var outputElement = document.getElementById(outputID);
    outputElement.innerHTML = inputElement.value;
    }
    function myFunction()
    {
    document.getElementById("a").innerHTML="My name is ";
    document.getElementById("b").innerHTML=", and i named my son";
    document.getElementById("c").innerHTML="too. We live in";
    }
    </script>
    </head>
    <body>
    <div>
    My Name: <input type="text" id="myname"><br>
    Son's Name: <input type="text" id="sonsname"><br>
    Country: <input type="text" id="country"><br>
    <button type="button" onclick="myFunction(); updateTxt('myname', 'output1'); updateTxt('sonsname', 'output2'); updateTxt('country', 'output3');">Run</button><br>
    <span id="a"></span><span id="output1"></span><span id="b"></span><span id="output2"></span><span id="c"></span><span id="output3"></span>
    </div>
    </html>

    Calling a Function with Arguments with a button

    in JavaScript

    Posted

    ok im sure im still way off, but i think im getting closer:

     

    <!DOCTYPE html>
    <html>
    <head>
    <title>Javascript and buttons</title>
    <script>
    function updateTxt(inputID, outputID){
    var inputElement = document.getElementById(inputID);
    var outputElement = document.getElementById(outputID);
    outputElement.innerHTML = inputElement.value;
    }
    function myFunction()
    {
    document.getElementById("a").innerHTML="My name is ";
    }
    function myFunctiona()
    {
    document.getElementById("b").innerHTML=", and i named my son";
    }
    function myFunctionb()
    {
    document.getElementById("b").innerHTML="too. We live in";
    }
    </script>
    </head>
    <body>
    <div>
    My Name: <input type="text" id="myname"><br>
    Son's Name: <input type="text" id="sonsname"><br>
    Country: <input type="text" id="country"><br>
    <button type="button" onclick="myFunction(); updateTxt('myname', 'output1'); myFunctiona(); updateTxt('sonsname', 'output2'); myFunctionb(); updateTxt('country', 'output3');">Run</button><br>
    <p id="a"></p><span id="output1"></span><p id="b"></p><span id="output2"></span><p id="c"></p><span id="output3"></span>
    </div>
    </html>

    Calling a Function with Arguments with a button

    in JavaScript

    Posted

    wow, that's perfect, and much cleaner, makes a lot of sense. Thank you so much.

     

    im still stuck on the last part, howto hide the text part completely until i click the button i.e.: <p>My name is <span id="output1"></span>, and i named my son <span id="output2"></span> too. We live in <span id="output3"></span>.</p>

     

    i found a script which unhides the text but im having trouble putting the two together, and im sure there must be a better way to do it

     

    here is the unhide script which i have to admit i didnt write, im still new to this, but im trying to put the two together:

     

    <!DOC HTML>

    <html>
    <head>
    <script type="text/javascript">
    function unhide(divID) {
    var sel = document.getElementById('2').getElementsByTagName('div');
    for (var i=0; i<sel.length; i++) {
    if (sel.id != divID) { sel.className = 'hidden'; }
    }
    var item = document.getElementById(divID);
    if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
    }
    </script>
    <style type="text/css">
    .hidden { visibility: hidden; }
    .unhidden { visibility: visible; }
    </style>
    </head>
    <body>
    <div id="1">
    <a href="javascript:unhide('hiddencontent1')">Run</a>
    </div>
    <div id="2">
    <div id="hiddencontent1" class="hidden">
    <p>My name is <span id="output1"></span>, and i named my son <span id="output2"></span> too. We live in <span id="output3"></span>.</p>
    </div>
    </div>
    </div>
    </body>
    </html>

    Calling a Function with Arguments with a button

    in JavaScript

    Posted

    So i changed <button onclick="updateTxt(toField, toField2)"> to <button onclick="updateTxt(field, toField, toField2)".

     

    now i understand what you mean by toField and toField2 not having a value because i want the value to be based on what is entered in the box.

     

    When i run this without a button it works fine, toField and toField2 are assigned values by the user. i.e:

     

    Name: <input type="text" id="box1" onkeyup="updateTxt('box1','txt1', 'txt111');"></BR>
    Country: <input type="text" id="box2" onkeyup="updateTxt('box2','txt2');"></BR>

    so how do i get it to run only once the button is clicked? is this the right way to go about it?

    Calling a Function with Arguments with a button

    in JavaScript

    Posted

    Here is the code i tried to put together when using the button, but it doesn't do anything, the text appears before the button is pressed. I also tried to change 'onkeyup' to 'onclick' but that doesn't work either.

     

     

    <!DOCTYPE html>
    <html>
    <script type="text/javascript">
    function updateTxt(field,toField, toField2){
    var field = document.getElementById(field);
    var toField = document.getElementById(toField);
    var toField2 = document.getElementById(toField2);
    toField.innerHTML=field.value;
    toField2.innerHTML=field.value;
    }
    </script>
    Name: <input type="text" id="box1" onkeyup="updateTxt('box1','txt1', 'txt111');"></BR>
    Country: <input type="text" id="box2" onkeyup="updateTxt('box2','txt2');"></BR>
    <button onclick="updateTxt(toField, toField2)">Run</button></BR>
    My name is <span id="txt1"></span>, and i named my son <span id="txt111"></span> too. We live in <span id="txt2"></span>
    </html>

    Calling a Function with Arguments with a button

    in JavaScript

    Posted

    I am new to this and have almost achieved what i would like to achieve. I want the complete output text (which comprises of plain text + text from the function to only appear once a button is clicked. At the moment the plain text appears immediately and the text from the function appears as soon as the text box is populated.
    i have tried to use: <button type="button" onclick="updateTxt()">Run</button> but cant get it to work. Please help
    <html>
    <script type="text/javascript">
    function updateTxt(field,toField, toField2){
    var field = document.getElementById(field);
    var toField = document.getElementById(toField);
    var toField2 = document.getElementById(toField2);
    toField.innerHTML=field.value;
    toField2.innerHTML=field.value;
    }
    </script>
    Name: <input type="text" id="box1" onkeyup="updateTxt('box1','txt1', 'txt111');"></BR>
    Country: <input type="text" id="box2" onkeyup="updateTxt('box2','txt2');"></BR>
    My name is <span id="txt1"></span>, and i named my son <span id="txt111"></span> too. We live in <span id="txt2"></span>
    </html>

     

×
×
  • Create New...