onclick выполняет только первую функцию

Question

Что мне нужно, так это то, что когда я нажимаю кнопку, она должна выполнять 2 функции. Однако выполняется только первая предоставленная функция, даже если я меняю порядок. Обе функции работают отдельно, но не вместе. Мне нужно сделать это в чистом 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>

Answer 1

Не используйте document.write, потому что он обновляет страницу, как вы можете видеть в этом примере:

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

Если вы хотите что-то вывести на свою страницу, используйте innerHTML или innerText некоторого элемента: Например. Вы хотите установить текст существующего элемента с 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";

Answer 2

Во-первых, следует понимать, что при нажатии кнопки submit элемент form вызывает событие submit и отправляет все данные формы на указанный URL-адрес в атрибуте action формы, а это означает, чтонавигация по страницам.Таким образом, если вы вызываете функции, которые пытаются изменить текущую страницу, вы не увидите эти изменения, потому что будете уходить с текущей страницы.

Однако для регистрации обработчиков событий не используйте встроенные атрибуты событий HTML (onclick) для настройки обработчиков событий.Используйте современные стандарты .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">