onclick executes only the first function

Question

What I need is that, when I press a button, it should execute 2 functions. However, only the first provided function is executed, even if I change the order. Both functions work separately, but not together. I need to do this in pure Javascript.

    <input type ="text" list="novadi" id="gerboni">
      <datalist id="gerbonis">
        <option value="1">
        <option value="2">
        <option value="3">
        <option value="4">
     </datalist>
    <form action="">
      <input type="radio" id="rainis" name="autors" value="1"> Rainis<br>
      <input type="radio" id="karlis" name="autors" value="2"> Baumaņu Kārlis<br>
      <input type="radio" id="caks" name="autors" value="3"> Aleksandrs Čaks
   </form>
    <input type="submit" value="iesniegt" onclick="funkcijas();">
    <script>
   
    function pirmaisotrais(){
   var a=document.getElementById("novadi");
   var b=document.getElementById("gerboni");
    if(a.value=="4"){
     document.write('1. pareizi <br>');
    }else if(a.value ==""){
     document.write("1. Jūs neievadijāt atbildi<br>")
    }
    else{
     document.write('1. nepareizi <br> pareizā atbilde : 4<br>');
    }
    if(b.value=="4" || b.value=="4."){
     document.write('2. pareizi <br>');
    }else if(b.value ==""){
     document.write("2. Jūs neievadijāt atbildi<br>")
    }
    else{
     document.write('2. nepareizi <br> pareizā atbilde : 4<br>');
    }
   
  }
  function tresais(){
   if (document.getElementById("rainis").checked) {
    document.write('3. nepareizi <br> pareizā atbilde : Baumaņu Kārlis<br>');
   }else if (document.getElementById("karlis").checked == true) {
     document.write('3. pareizi <br>');
   }else{
     document.write('3. nepareizi <br> pareizā atbilde : Baumaņu Kārlis<br>');
   }
   

  }
  function funkcijas(){
   pirmaisotrais();
   tresais();
   
   
  }
  </script>

Share your html code so we can know more where you are facing problems. — Komal R, Apr 11 '19 at 11:31
There is no "novadi" Id so it will result in breakage of code when you use a.value — Krishna Prashatt, Apr 11 '19 at 11:33
@KrishnaPrashatt there actually is a very similar HTML input as the first one that i provided with an id of novadi, i just didn't paste it because, the site gave me a message of having too much code, and not enough plain text — Kalvis, Apr 11 '19 at 11:38
@Kalvis as I mentioned in my answer - don't use document.write, because it refreshes page. You can use alert or console.log for testing purposes — Pavel Třupek, Apr 11 '19 at 11:42
@PavelTřupek can you provide some other alternatives to alert and console.log? For example to make a new section in the same page, that contains the output of functions — Kalvis, Apr 11 '19 at 12:02

score 0 · Answer 1 · answered Apr 11 '19 at 11:31

First, understand that when a submit button is clicked, it causes the form element to fire its submit event and send all the form data to the specified URL in the form's action attribute and this means page navigation. So, if you are calling functions that attempt to modify the current page, you won't see those changes because you'll be navigating away from the current page.

But, to register event handlers, don't use inline HTML event attributes (onclick) to set up your event handlers. Use modern standards of .addEventListener().

// Get reference to button
let btn = document.querySelector("input[type='button']");

// Set up first click handler
btn.addEventListener("click", foo1);

// Set up second click handler
btn.addEventListener("click", foo2);

function foo1(){ 
  console.log("Hello from foo1");
}

function foo2(){ 
  console.log("Hello from foo2");
}

<input type="button" value="iesniegt">

Pavel Třupek · Accepted Answer · 2019-04-11T12:43:14.223

0

Don't use document.write, because it refreshes page as you can see in this example:

<input type="button" id="button1" value="btn1">
<input type="button" id="button2" value="btn2">

//btn1 calls both functions
let btn = document.getElementById("button1");
btn.addEventListener("click", function(){ alert('1'); });
btn.addEventListener("click", function(){ alert('2'); });


//btn1 calls first function which refreshes page
let btn2 = document.getElementById("button2");
btn2.addEventListener("click", function() {document.write('1');});
btn2.addEventListener("click", function() {document.write('1');});

If you want to output something to your page, use innerHTML or innerText of some element: Eg. you want to set text of existing element with id=result:

<div id="result">Result will be shown here</div>

//replace actual text
document.getElementById("result").innerText = "Replace results text with this.";

//append to actual text
document.getElementById("result").innerText += "And then append this";

edited Apr 11 '19 at 12:43

answered Apr 11 '19 at 11:37

Pavel Třupek

898
6
19

Im sorry if i miss your point, as i am a newbie in Javascript, but i need only one button – Kalvis Apr 11 '19 at 11:41
@Kalvis I understand, I just wanted to show you, that document.write refreshes your page. If you want to output smth to your page, use innerHTML or something similar. You can replace `document.write` with `alert` in your code to see what happens. – Pavel Třupek Apr 11 '19 at 11:43
Thanks, i replaced document.write with console.log, and that seems to help – Kalvis Apr 11 '19 at 11:48

onclick executes only the first function

2 Answers2