Jump to content

citizen2

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Everything posted by citizen2

  1. citizen2
    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>
  2. citizen2
    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>
  3. citizen2
    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>
  4. citizen2
    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?
  5. citizen2
    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>
  6. citizen2
    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...