How do you make javascript(including function with array and return) write in div on button click without...

up vote
1
down vote

favorite

I have had a lot of problems with this problem. When I console.log(sum); I get the answer I am looking for, but when I try to output the answer from a button click and an input field it does not work. I changed felt3.innerHTML=addnumber(ttt); to document.write(addnumber(ttt)); which made it work, but it is sending it to another page, which is something I do not want. How I can make this work:

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

and:

var number = document.getElementById("number");



var felt3 = document.getElementById("tall3");



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  felt3.innerHTML=addnumber(ttt);

}

edited Nov 19 at 19:55

Anthony

2118

asked Nov 19 at 19:37

Blank

184

add a comment |

up vote
1
down vote

favorite

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

and:

var number = document.getElementById("number");



var felt3 = document.getElementById("tall3");



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  felt3.innerHTML=addnumber(ttt);

}

edited Nov 19 at 19:55

Anthony

2118

asked Nov 19 at 19:37

Blank

184

add a comment |

up vote
1
down vote

favorite

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

and:

var number = document.getElementById("number");



var felt3 = document.getElementById("tall3");



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  felt3.innerHTML=addnumber(ttt);

}

edited Nov 19 at 19:55

Anthony

2118

asked Nov 19 at 19:37

Blank

184

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

and:

var number = document.getElementById("number");



var felt3 = document.getElementById("tall3");



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  felt3.innerHTML=addnumber(ttt);

}

javascript html5 forms function input

edited Nov 19 at 19:55

Anthony

2118

asked Nov 19 at 19:37

Blank

184

edited Nov 19 at 19:55

Anthony

2118

asked Nov 19 at 19:37

Blank

184

edited Nov 19 at 19:55

Anthony

2118

edited Nov 19 at 19:55

Anthony

2118

edited Nov 19 at 19:55

Anthony

2118

asked Nov 19 at 19:37

Blank

184

asked Nov 19 at 19:37

Blank

184

asked Nov 19 at 19:37

Blank

184

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

If I understand your question correctly, then the solution here is to update the argument that you are passing to getElementById("tall3"), rewriting it to document.getElementById("felt3");.

Doing this will cause your script to aquire the reference to the div element with id felt3. When your onclick event handler is executed, the result of addnumber() will be assigned to the innerHTML of the valid felt3 DOM reference as required:

var number = document.getElementById("number");



// Update this line to use "felt3"

var felt3 = document.getElementById("felt3"); 



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  

  // Seeing that felt3 is now a valid reference to 

  // a DOM node, the innerHTML of div with id felt3

  // will update when this click event is executed 

  felt3.innerHTML=addnumber(ttt);

}

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

answered Nov 19 at 19:41

Dacre Denny

9,5384929

Oh, ooh. It seems i did not see that. Thanks a lot! :D
– Blank
Nov 19 at 19:51

@Blank you're welcome :)
– Dacre Denny
Nov 19 at 19:54

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381496%2fhow-do-you-make-javascriptincluding-function-with-array-and-return-write-in-di%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

If I understand your question correctly, then the solution here is to update the argument that you are passing to getElementById("tall3"), rewriting it to document.getElementById("felt3");.

var number = document.getElementById("number");



// Update this line to use "felt3"

var felt3 = document.getElementById("felt3"); 



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  

  // Seeing that felt3 is now a valid reference to 

  // a DOM node, the innerHTML of div with id felt3

  // will update when this click event is executed 

  felt3.innerHTML=addnumber(ttt);

}

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

answered Nov 19 at 19:41

Dacre Denny

9,5384929

Oh, ooh. It seems i did not see that. Thanks a lot! :D
– Blank
Nov 19 at 19:51

@Blank you're welcome :)
– Dacre Denny
Nov 19 at 19:54

add a comment |

up vote
0
down vote

accepted

If I understand your question correctly, then the solution here is to update the argument that you are passing to getElementById("tall3"), rewriting it to document.getElementById("felt3");.

var number = document.getElementById("number");



// Update this line to use "felt3"

var felt3 = document.getElementById("felt3"); 



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  

  // Seeing that felt3 is now a valid reference to 

  // a DOM node, the innerHTML of div with id felt3

  // will update when this click event is executed 

  felt3.innerHTML=addnumber(ttt);

}

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

answered Nov 19 at 19:41

Dacre Denny

9,5384929

Oh, ooh. It seems i did not see that. Thanks a lot! :D
– Blank
Nov 19 at 19:51

@Blank you're welcome :)
– Dacre Denny
Nov 19 at 19:54

add a comment |

up vote
0
down vote

accepted

If I understand your question correctly, then the solution here is to update the argument that you are passing to getElementById("tall3"), rewriting it to document.getElementById("felt3");.

var number = document.getElementById("number");



// Update this line to use "felt3"

var felt3 = document.getElementById("felt3"); 



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  

  // Seeing that felt3 is now a valid reference to 

  // a DOM node, the innerHTML of div with id felt3

  // will update when this click event is executed 

  felt3.innerHTML=addnumber(ttt);

}

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

answered Nov 19 at 19:41

Dacre Denny

9,5384929

If I understand your question correctly, then the solution here is to update the argument that you are passing to getElementById("tall3"), rewriting it to document.getElementById("felt3");.

var number = document.getElementById("number");



// Update this line to use "felt3"

var felt3 = document.getElementById("felt3"); 



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  

  // Seeing that felt3 is now a valid reference to 

  // a DOM node, the innerHTML of div with id felt3

  // will update when this click event is executed 

  felt3.innerHTML=addnumber(ttt);

}

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

var number = document.getElementById("number");



// Update this line to use "felt3"

var felt3 = document.getElementById("felt3"); 



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  

  // Seeing that felt3 is now a valid reference to 

  // a DOM node, the innerHTML of div with id felt3

  // will update when this click event is executed 

  felt3.innerHTML=addnumber(ttt);

}

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

var number = document.getElementById("number");



// Update this line to use "felt3"

var felt3 = document.getElementById("felt3"); 



var form3 = document.getElementById("form3");



var button3 = document.getElementById("button3");



var sum=0;



function addnumber(x){

  var array = ;

  array.push(x);

  for (var i = 0; i < array.length; i++) {

      sum=sum+array[i];

  }

  return sum;

}



button3.onclick=function(){

  var ttt=Number(number.value);

  

  // Seeing that felt3 is now a valid reference to 

  // a DOM node, the innerHTML of div with id felt3

  // will update when this click event is executed 

  felt3.innerHTML=addnumber(ttt);

}

<form id="form3">

  Tall:<input type="number" id="number"><br>

  <input type="button" id="button3" value="plusse"><br>

</form>

<div id="felt3"></div>

answered Nov 19 at 19:41

Dacre Denny

9,5384929

answered Nov 19 at 19:41

Dacre Denny

9,5384929

answered Nov 19 at 19:41

Dacre Denny

9,5384929

answered Nov 19 at 19:41

Dacre Denny

9,5384929

Oh, ooh. It seems i did not see that. Thanks a lot! :D
– Blank
Nov 19 at 19:51

@Blank you're welcome :)
– Dacre Denny
Nov 19 at 19:54

add a comment |

Oh, ooh. It seems i did not see that. Thanks a lot! :D
– Blank
Nov 19 at 19:51

@Blank you're welcome :)
– Dacre Denny
Nov 19 at 19:54

Oh, ooh. It seems i did not see that. Thanks a lot! :D
– Blank
Nov 19 at 19:51

@Blank you're welcome :)
– Dacre Denny
Nov 19 at 19:54

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr