Question

我正在尝试使用DOM更改html中的文本。我有一个带有2个单选按钮和一个提交按钮的表单。提交后，它将运行JS函数，该函数应更改HTML中的文本以反映他们选择的答案。但是，每当您单击提交按钮时，它都会更改文本，然后立即闪烁回到html所显示的内容。为什么这样做呢？我以前从未见过。这是代码...

Unhandled Exception:
Microsoft.Scripting.SyntaxErrorException: invalid syntax
  at IronPython.Runtime.ThrowingErrorSink.Add (Microsoft.Scripting.SourceUnit sourceUnit, System.String message, Microsoft.Scripting.SourceSpan span, System.Int32 errorCode, Microsoft.Scripting.Severity severity) [0x0001a] in <0569a20e5dd94f74a766cc11c6214b7c>:0 
  at IronPython.Compiler.Parser.ReportSyntaxError (System.Int32 start, System.Int32 end, System.String message, System.Int32 errorCode) [0x0003a] in <0569a20e5dd94f74a766cc11c6214b7c>:0 
  at IronPython.Compiler.Parser.ReportSyntaxError (System.Int32 start, System.Int32 end, System.String message) [0x00000] in <0569a20e5dd94f74a766cc11c6214b7c>:0 
  at IronPython.Compiler.Parser.ReportSyntaxError (System.String message) [0x00027] in <0569a20e5dd94f74a766cc11c6214b7c>:0 
  at IronPython.Compiler.Parser.AddTrailers (IronPython.Compiler.Ast.Expression ret, System.Boolean allowGeneratorExpression) [0x00103] in <0569a20e5dd94f74a766cc11c6214b7c>:0

function answerNext()
{
	if(document.getElementById("question1").checked == true)
	{
		document.getElementById("qtext").innerText="You chose the first option";
	}else if (document.getElementById("question2").checked == true)
	{
		documet.getElementById("qtext").innerText="You chose the second option";
	}else
	{
		document.getElementById("qtext").innerText="You chose neither option";
		document.getElementById("testdiv").innerHTML="<h1>You clicked next</h1>";
	}
}

Answer 1

将按钮类型从submit更改为button，这样表单就不会实际提交。

<input type="button" value="Next" onclick="answerNext();">

您还需要修复错字（documet）并实现一个广播组，以防止同时选择这两个错字。最后，将单选按钮及其文本包装在label元素中，以实现可访问性和更好的可用性（标签文本变为可单击）。

Demo of all that

function answerNext() {
  if (document.getElementById("question1").checked == true) {
    document.getElementById("qtext").innerText = "You chose the first option";
  } else if (document.getElementById("question2").checked == true) {
    document.getElementById("qtext").innerText = "You chose the second option";
  } else {
    document.getElementById("qtext").innerText = "You chose neither option";
    document.getElementById("testdiv").innerHTML = "<h1>You clicked next</h1>";
  }
}

<h1>Is now a good time to get a dog?</h1>
<h2 id="qtext">Do you like to run a lot</h2>
<div id="testdiv"></div>
<form>
  <label><input type="radio" id="question1" value="option1" name="blah"> Option 1</label>
  <label><input type="radio" id="question2" value="option1" name="blah"> Option 2</label>
  <input type="button" value="Next" onclick="answerNext(event);">
</form>

Answer 2

首先，您可以将输入的属性type更改为"button"，但是如果您希望将其保留为submit按钮，则需要将表单提交事件停止到防止页面导航/刷新。

您可以通过使用事件函数的第一个参数来执行此操作。第一个参数包含已触发的事件。如果浏览器不支持此功能，则将使用window.event进行后备（我们首先进行检查，因为某些浏览器仅支持argument，而另一些仅支持window.event）。

使用以下示例停止浏览器触发Submit事件：

function answerNext(evt)
{
    if (evt == null)
    {
        evt = window.event;
    }

    evt.preventDefault();
    evt.stopPropagation();

    . . .

第二，您需要对比率输入进行分组，以便一次只能选择一个。为此，创建一个fieldset元素并将name属性添加到输入中，然后将它们连接到该组：

<fieldset id="group1">
    <input type="radio" id="question1" value="option1" name="group1"> Option 1
    <input type="radio" id="question2" value="option2" name="group1"> Option 2
</fieldset>

此外，if else语句中有一个错误，其中有一个错字documet应该是document。

试用我为您修复的代码：

function answerNext(evt)
{
	if (evt == null)
	{
		evt = window.event;
	}
  
  evt.preventDefault();
	evt.stopPropagation();
  
  if(document.getElementById("question1").checked == true)
	{
		document.getElementById("qtext").innerText="You chose the first option";
	}else if (document.getElementById("question2").checked == true)
	{
		document.getElementById("qtext").innerText="You chose the second option";
	}else
	{
		document.getElementById("qtext").innerText="You chose neither option";
		document.getElementById("testdiv").innerHTML="<h1>You clicked next</h1>";
	}
}

fieldset#group1
{
  border: none;
  display: inline;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Dog Personailty Quiz</title>
		<link href="css/style.css" rel="stylesheet" type="text/css">
		<script src="js/script.js"></script>
	</head>
	<body>
		<h1>Is now a good time to get a dog?</h1>
		<h2 id="qtext">Do you like to run a lot</h2>
		<div id="testdiv"></div>
		<form>
      <fieldset id="group1">
        <input type="radio" id="question1" value="option1" name="group1"> Option 1
        <input type="radio" id="question2" value="option2" name="group1"> Option 2
      </fieldset>
			<input type="submit" value="Next" onclick="answerNext();">
		</form>
	</body>
</html>

使用JS函数时HTML闪烁

2 个答案: