从HTML的JavaScript - 如何使图像从提交功能可见？ （没有CSS） [英] Javascript from HTML - How to make image visible from submit function? (no CSS)
问题描述
我只想使用html和javaScript - 在我受教育的这个阶段，我大部分时间都很舒服
我的挑战是
- 我在html表格中有图片
- 我想显示一张图片灯泡
在用户点击正确的单选按钮
并点击提交表单类型按钮（onSubmit）
I 可能让灯泡图像显示在我的onSubmit函数之外 我最初将这些灯泡图像设置为no在显示表格的html中 我注意到，有时在选择正确答案后，灯泡图像会闪烁，然后再次变为不可见。然后我搜索了一下，发现onSubmit过程重置了原始属性的值。 不是很成熟，但对于jQuery，我无法获取他人提出的建议。我终于意识到我没有必要使用onSubmit类型的按钮（认为其中一位回答此问题的人提出了一些沿着这些方向的建议，但现在找不到它 - 如果我找到它，我会投票答复他们的答案<注意1：为了本示例的目的，我仅在html中嵌入了JavaScript。我确实将我的功能保存在单独的文件中。 （重新：建议之一评论） 注2：此示例在使用后不会清除单选按钮设置。这是相当可行的，并有一个很好的例子，这是有效的，但不包括在内。你可以在 代码，我通过消除onSubmit类型函数来解决我的问题。当我处理这个问题时，我发现这种类型的函数会将html文档中的信息（DOM - 这是正确使用的术语？）重置为原始值。我不希望发生重置，因为我想在用户选择正确答案后显示一个初始隐藏的图像。我将代码更改为现在使用常规的onClick类型函数，现在我的图像保持显示。这意味着我必须自己做其他事情，比如清理单选按钮，或许还有更多。 This posting replaces my original challenge with a correctly working example.
I wanted to use only html and javaScript - that is where I am mostly comfortable at this stage of my education My challenge WAS that I could not get the light bulb pictures to display after a correct choice I could get the light bulb image to display outside of my onSubmit function I initially set these light bulb images to not be visible, within the html displaying the table I noted that, sometimes after a correct answer was chosen, the light bulb image would flash, then become non-visible again. I then searched around and saw that, indeed, the onSubmit process resets values to take on their original attributes. Not being sophisticated, yet, with jQuery, I was unable to get the suggestions made by others to work. I finally realized I did not have to use an onSubmit type button at all (thought one of the folks who answered this suggested something along those lines, but cannot find it now - if I find it I will vote up their answer) Note 1: I have embedded the javaScript within the html only for purposes of this example. I do keep my functions in separate files. (re: comment by one of suggestions) Note 2: This example does not clear the radio button setting after use. That is quite do'able and there is a good example of this, which works but is not included. You can find that at
How to clear radio button in Javascript? Below is the example code that does what I was originally trying to do.
Notice - I'm not using any type of form or form submit function, as that gave me problems. So the suggestions made by others, might be very helpful for someone who still needs to use forms/form checking.
As shown in my totally revised posting of my challenge and code, I resolved my problem by eliminating an onSubmit type function. As I worked with this problem I found that this type of function resets information in the html document (DOM - is this correct use of term?) to original values. I did not want that reset to occur, because I wanted to display an, initially hidden, image once the user chose a correct answer. I changed the code to now use a regular onClick type function, and now my images stayed displayed. It does mean I have to do other things myself, such as clearing radio buttons, and perhaps more. 这篇关于从HTML的JavaScript - 如何使图像从提交功能可见？ （没有CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
无法 在正确选择后显示灯泡图片
找到
< html>
< head>
< title>< / title>
< / head>
< body>
< center>
这只鸟叫什么？
< p>< img alt =a birdheight =150id =photosrc =
img / testImages / spotted％20Sandpipler.JPGstyle =clear：left width =
100>< / p>
< / center>
< button onclick =checkAnswer（）>检查答案< / button>
< p>< / p>
< table>
< tr>
< td>< input id ='first'name =operationtype =radiovalue =1>
< label for =alsoFirst>回答1< / label>< / td>
< td>< img height =52id =light1src =img / alternateCoolBulb.jpeg
style =visibility：hidden;宽度= 42 >< / TD>
< / tr>
< tr>
< td>< input id ='second'name =operationtype =radiovalue =2>
< label for =alsoSecond>回答2< / label>< / td>
< td>< img height =52id =light2src =img / alternateCoolBulb.jpeg
style =visibility：hidden;宽度= 42 >< / TD>
< / tr>
< / table>
< script type =text / javascript>
//历史
//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（）{
//看起来像一个GOOD实践 - 让我从获取类型错误我得到
// https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
if（document.readyState ===complete）{
init（）;
}
}）;
函数init（）{
var label = document.getElementsByTagName（'label'）[0];
label.innerHTML ='Curlew';
var label1 = document.getElementsByTagName（'label'）[1];
label1.innerHTML ='Sandpiper';
$ b函数checkAnswer（）{
var clickedIt =yes;
console.log（我到达myNEWFunction？，clickedIt）;
$ b $ if（document.getElementById（'first'）。checked == true）
{
// alert（您已选择第一个答案 - 错误）;
console.log（您已选择第一个答案 - 错误）;
$ b $ else
if（document.getElementById（'second'）。checked == true）
{
console.log （你已经选择了第二个答案 - 右）;
document.getElementById（light2）。style.visibility =visible;
}
}
< / script>
< / body>
< / html>
- 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)
<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>
