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

首先，请了解，单击submit按钮时，它将导致form元素触发其submit事件，并将所有表单数据发送到表单{ {1}}属性，这意味着页面导航。因此，如果您要调用试图修改当前页面的函数，则不会看到这些更改，因为您将离开当前页面。

但是，要注册事件处理程序，请don't use inline HTML event attributes（action）来设置事件处理程序。使用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");
}

Answer 2

请勿使用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";

onclick仅执行第一个功能

2 个答案: