时间戳

首页 > 解决方案 > onclick 只执行第一个函数

javascript - onclick 只执行第一个函数

问题描述

我需要的是，当我按下一个按钮时，它应该执行 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>

标签： javascriptfunctiononclick

解决方案

首先，要了解当一个submit按钮被点击时，它会导致form元素触发它的submit事件并将所有的表单数据发送到表单action属性中的指定 URL，这意味着页面导航。因此，如果您正在调用试图修改当前页面的函数，您将不会看到这些更改，因为您将离开当前页面。

但是，要注册事件处理程序，不要使用内联 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">

推荐阅读