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);
}









share|improve this question




























    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);
    }









    share|improve this question


























      up vote
      1
      down vote

      favorite









      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);
      }









      share|improve this question















      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);
      }






      javascript html5 forms function input






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 19 at 19:55









      Anthony

      2118




      2118










      asked Nov 19 at 19:37









      Blank

      184




      184
























          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>








          share|improve this answer





















          • 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











          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


















          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















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          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>








          share|improve this answer





















          • 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















          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>








          share|improve this answer





















          • 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













          up vote
          0
          down vote



          accepted







          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>








          share|improve this answer












          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>








          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>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 19 at 19:41









          Dacre Denny

          9,5384929




          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


















          • 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




          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




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


















          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














          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















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          "Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

          Alcedinidae

          RAC Tourist Trophy