1-19作业

<!DOCTYPE html ><br><br><html><br><head><br><meta charset="UTF-8"><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title>1-19jQuery练习</title><br><br><style type="text/css"><br>.div1{<br><br> float: left;<br> width: 50px;<br> line-height: 30px;<br> background-color: lightgray;<br> margin-left: 10px;<br> text-align: center;<br> vertical-align: middle;<br>}<br>.div2{<br> width: 300px;<br> height: 300px;<br> border: solid gray 1px;<br> margin-top: 60px;<br> color: red;<br>}<br></style><br><br><br></head><br><body><br> <h2>请选择背景颜色</h2><br> <div><br> <div id="blue" class="div1">蓝色</div><br> <div id="green" class="div1">绿色</div><br> </div><br> <div class="div2" id="bg"><br> </div><br> <div>输入颜色首字母： <input type="text" name="color"></div><br><script type="text/javascript" src="js/jquery-3.6.0.js"></script><br><script><br> //1当加载页面时，弹出提示框：欢迎来到设置颜色的页面<br> $(function(){ //$(function(){} )是jQuery文档就绪函数，表示当页面加载完成后执行函数<br> alert("欢迎来到设置颜色的页面"); <br> });<br

>/*   当点击名为蓝色的div，下面的div背景色变为蓝色，并设置文字内容为”蓝色背景“，如图2所示；<

br

>  当点击名为绿色的div时，下面的div背景色变为绿色，并将文字设置成“绿色背景”，并设置字体为加粗斜体 */<

br> $("#blue").click(function(){<br> $(".div2").css("background-color","blue");<br> $(".div2").text("蓝色背景",); <br> })<br> //绿色<br> $("div[id='green']").click(function(){<br> $("div[class='div2']").css("background-color","green");<br> $("div[class='div2']").text("绿色背景").css({"font-style":"italic","font-weight":"bold"});<br> });<br>/* 3、当在文本框中输入大写的字母B时，背景颜色变为蓝色，并清空div的内容；<br> 当输入大写字母G时，背景颜色变为绿色，并清空div的内容。 */<br> $("input[name='color']").keypress(function(event){<br> if(event.key=="B"){ //event.keyCode==66 /77;<br> $(".div2").text(""); <br> }else if(event.key=="C"){<br> $(".div2").css("background-color","green").text("");<br> }<br> }); <br><br><br><br></script><br></body><br></html><br>

老师，有个疑问，可以通过document.getElementsByName().valuel ,然后进行if判断 ==B，进行设置蓝色， ==G设置绿色吗？我试了试不可以啊，为什么呢？

rock221 2021-03-21

源自：jQuery与Ajax入门 1-19 自由编程

收起

4回答

好帮手慕阿满 2021-03-22 11:59:21

同学你好，如下代码中，getElementById()获取的是上一次输入的数据。第一次输入的B，然后第二次获取到上一次输入的B，通过if判断，就显示为蓝色。

keypress是按下键盘时触发事件，当按下键盘时，字符还没有被输入就已经触发了事件。如果第一次输入B，按下键盘，触发了事件，此时B还没输入到input框。函数中，getElementById()获取为null，div背景色不改变，B被输入到input框中。

当第二次输入G（或者C）时，按下键盘，触发事件，此时G（或者C）没有输入到input框中，函数中，getElementById()获取到上次输入的B，通过if(name=="B")，将div2的背景色设置为蓝色。

同学可以自己试一下。

祝：学习愉快~

收起回答

提问者 rock221 #1

getElementById()是获取上次的值，不是本次文本框输入的值吗？也就是第一次null，获取的name=null，第二次输入b，获取的name=null，第三次输入c，获取的是name=b？
我一直以为输入的信息，是同步获取的阿。。。

2021-03-22 12:14:57
提问者 rock221 #2

var name=document.getElementById("color");
if(name=="B"){
alert("b");
}else if(name="C"){
alert("G");
}
为什么第二次触发事件，无论我输的是什么，都会出现G阿。这里if没用阿？

2021-03-22 12:23:53
提问者 rock221 #3

我好想明白了， getElementById()获取的就是文本框的值，只是说在这个事件内比较特殊，因为当点击文本框的时候，就产生了一次事件，所以id的值是null的，然后输入B，id为B，按下键盘又产生了一次事件，而 getElementById()是获取的文本内产生的内容，所以会延迟一次，对吧？那么第一次什么都不输出，我理解，为什么在文本框输入任何内容都会出发else if 里面的代码呢？
  var name=document.getElementById("color");
  if(name=="B"){
  alert("b");
  }else if(name="C"){
  alert("G");
  }

2021-03-22 12:36:14

点开查看后面4条评论

好帮手慕阿满 2021-03-21 19:00:38

同学你好，这里的逻辑不正确。

第一次输入B，想要显示为蓝色。但是当按下按钮时，触发了事件，此时B还没输入到input框。函数中，getElementById()获取为null，div背景色不改变，B被输入到input框中。第一次输入的B，div颜色不改变。

然后又输入G（或者C），想要显示为绿色，按下键盘，触发了事件，此时G（或者C）没有输入到input框中，getElementById()获取到上次输入B，div背景色改变为蓝色，G（或者C）输入到input框中。

第一次输入B想要显示为蓝色，结果没有显示，第二次想要输入G（或C）显示为绿色，结果显示为蓝色，这种不符合要求。如果第三次继续输入，将会获取之前输入的BG（或者BC），没有对应的if判断，div背景色不变。

祝学习愉快~

收起回答

提问者 rock221 #1

不能说当name=="B", 设置样式吗？它文本框的value的值不等于B或C的时候，不会执行if语句里的代码阿，这样不就可以了吗？当第一次是空的时候，不执行if里的代码阿。

2021-03-21 19:05:59
好帮手慕阿满回复提问者 rock221 #2

同学你好，这里是逻辑不正确。第一次输入B想要显示为蓝色，结果不显示。第二次输入G（或C）想要显示为绿色，结果显示为蓝色。显示结果和想要得到的结果不同，不符合要求，所以不能使用document.getElementsByName().value这种方式。。
祝学习愉快~

2021-03-22 09:57:31
提问者 rock221 回复好帮手慕阿满 #3

为什么第二次输入显示绿色啊，不是增加if判断吗，当输入的值等于b的时候才会执行if变蓝的语句啊

2021-03-22 10:30:03

好帮手慕阿满 2021-03-21 18:43:19

抱歉同学，没看清同学的具体问题，这里不能使用document.getElementsByName().value这种方式。

首先getElementsByName()返回的是一个集合，如果非要使用这种方式，建议给input标签定义id属性，然后使用getElementsById()，如：

还有一个问题，keypress是按下键盘时触发事件，当按下键盘时，字符还没有被输入就已经触发了事件，第一次获取为空字符，不能改变div2的背景色。再按键盘时，会获取到上一次输入的字符，和要输入的字符所以触发的事件不相符，所以不能使用document.getElementsByName().value这种方式。

祝学习愉快~

收起回答

提问者 rock221 #1

第一次输入的是空字符那么进行if逻辑判断不可以吗？判断只有输出B或C的时候再进行设置样式

2021-03-21 18:45:42

好帮手慕阿满 2021-03-21 18:03:46

同学你好，也是可以的，但是在同学的代码中，当==B时，没有设置背景色，当==C时，设置为绿色，如：

建议同学修改一下，当==B时，设置背景色，当==G时，设置绿色，如：

祝学习愉快~

收起回答

提问者 rock221 #1

但是我没有实现阿。老师。。
var name=document.getElementsByName().valuel ,然后进行if判断 ==B，进行设置蓝色， ==G设置绿色就是这个。实现不出来。。。不知道为什么呢。。。怎么表示阿。我设置的if(name=="B") 没用。。

2021-03-21 18:09:21