Jump to content

Calling a Function with Arguments with a button


citizen2

Recommended Posts

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>

 

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

You're not passing the same parameters in the <button> element as in the <input> elements.

 

updateTxt(toField, toField2) is not the same as updateTxt('box1','txt1', 'txt111')

 

toField and toField2 don't have a value in that context either, so it's not going to do anything.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Well, I'm just going to organize your code a bit and make it work and hopefully you can learn by comparing to the code you started off with

<!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;        }        </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="updateTxt('myname', 'output1'); updateTxt('sonsname', 'output2'); updateTxt('country', 'output3');">Run</button><br>        <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></html>
  • Like 1
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...