这篇文章用正确工作的示例取代了我最初的挑战。
我只想使用 html 和 javaScript - 这是我在教育的这个阶段最舒服的地方
我的挑战是
- I had images within an html table
- I wanted to display an image of a light bulb
after the user clicked the correct radio button
and clicked on a submit form type button (onSubmit)
我无法在正确选择后显示灯泡图片
我可以让灯泡图像在 onSubmit 函数之外显示
我最初将这些灯泡图像设置为在显示表格的 html 中不可见
我注意到，有时在选择正确答案后，灯泡图像会闪烁，然后再次变得不可见。然后我四处搜索，发现 onSubmit 进程确实重置了值以采用其原始属性。
由于 jQuery 不够复杂，我无法让其他人提出的建议发挥作用。我终于意识到我根本不必使用 onSubmit 类型按钮(认为回答这个问题的人之一提出了类似的建议，但现在找不到它 - 如果我找到它，我会投票支持他们的答案)
注 1:我将 javaScript 嵌入到 html 中只是为了本示例的目的。我确实将我的函数保存在单独的文件中。 (回复:建议之一的评论)
注2:本示例在使用后不会清除单选按钮设置。这是完全可行的，并且有一个很好的例子，它可以工作，但不包括在内。您可以在 How to clear radio button in Javascript?
下面是执行我最初尝试执行的操作的示例代码。
注意 - 我没有使用任何类型的表单或表单提交功能，因为这给我带来了问题。因此，其他人提出的建议可能对于仍然需要使用表单/表单检查的人非常有帮助。
<html>
<head>
<title></title>
</head>
<body>
<center>
What is this bird called?
<p><img alt="a bird" height="150" id="photo" src=
"img/testImages/spotted%20Sandpipler.JPG" style="clear: left" width=
"100"></p>
</center>
<button onclick="checkAnswer()">Check Answer</button>
<p></p>
<table>
<tr>
<td><input id='first' name="operation" type="radio" value="1">
<label for="alsoFirst">Answer 1</label></td>
<td><img height="52" id="light1" src="img/alternateCoolBulb.jpeg"
style="visibility: hidden;" width="42"></td>
</tr>
<tr>
<td><input id='second' name="operation" type="radio" value="2">
<label for="alsoSecond">Answer 2</label></td>
<td><img height="52" id="light2" src="img/alternateCoolBulb.jpeg"
style="visibility: hidden;" width="42"></td>
</tr>
</table>
<script type="text/javascript">
//history
//https://stackoverflow.com/questions/2554116/how-to-clear-radio-button-in-javascript
//https://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
//https://stackoverflow.com/questions/37954245/image-will-not-switch-between-hidden-and-show
document.addEventListener('readystatechange', function() {
// Seems like a GOOD PRACTICE - keeps me from getting type error I was getting
// https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
if (document.readyState === "complete") {
init();
}
});
function init() {
var label = document.getElementsByTagName('label') [0];
label.innerHTML = 'Curlew ';
var label1 = document.getElementsByTagName('label') [1];
label1.innerHTML = 'Sandpiper';
}
function checkAnswer() {
var clickedIt = "yes";
console.log ("did I get to myNEWFunction? ", clickedIt);
if(document.getElementById('first').checked == true)
{
//alert ( "You have selected the first answer - WRONG" );
console.log( "You have selected the first answer - WRONG" );
}
else
if(document.getElementById('second').checked == true)
{
console.log( "You have selected the second answer - RIGHT" );
document.getElementById("light2").style.visibility = "visible";
}
}
</script>
</body>
</html>
最佳答案
而不是使用
document.getElementById("light2").style.visibility = "visible";
你可以使用
document.getElementById("light2").style.display = "block";
和
img style="display: none;"
关于HTML 中的 Javascript - 如何使图像在提交功能中可见？ (无 CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39756163/