Javascript 这段代码的每一行都做什么？_Javascript_Jquery_Html

Javascript 这段代码的每一行都做什么？

javascript jquery html

Javascript 这段代码的每一行都做什么？,javascript,jquery,html,Javascript,Jquery,Html,我是Javascript编码新手，我在W3上看到了这个TryIt页面。我知道这段代码创建了两个按钮，在单击时打开和关闭灯泡，但我希望一些Javascript专家对这段代码中每一行的具体功能进行更详细的解释比如说，你知道吗 <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'"> 只需创建一个按钮，并在单击时显示标题为bulbon.gif的图像？我有点困惑。代码如下： <!DOCT

我是Javascript编码新手，我在W3上看到了这个TryIt页面。我知道这段代码创建了两个按钮，在单击时打开和关闭灯泡，但我希望一些Javascript专家对这段代码中每一行的具体功能进行更详细的解释

比如说，你知道吗

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">

只需创建一个按钮，并在单击时显示标题为bulbon.gif的图像？我有点困惑。代码如下：

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attributes.</p>

<p>In this case JavaScript changes the src (source) attribute of an image.    </p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>


JavaScript能做什么？
JavaScript可以更改HTML属性
在本例中，JavaScript更改图像的src（source）属性
开灯
关灯

谢谢。

让我们看看代码：

onclick=“document.getElementById（'myImage'）.src='pic\u bulbon.gif'”

OnClick

bind按钮上的事件，单击按钮时将触发该事件。根据您使用的元素的类型，有各种事件。例如，onKeyUp、onKeyDown、onSelect等

document.getElementById（'myImage'）

告诉浏览器检索ID为“myImage”的DOM元素（/！\Membered ID在代码中必须是唯一的，否则行为未知，代码将无法正常工作。getElementsByName将返回一个包含与给定名称匹配的DOM元素的数组。人们往往会混淆这两个函数，但请注意结尾处的S:getElement/getElements）

.src=“pic_bulbon.gif”

用新图片替换以前找到的元素源，并强制重新绘制该元素

因此，不，它不会创建新元素，但会更改现有元素的属性

两个按钮只会更改图像的源属性。没有其他内容。您应该将JavaScript与HTML分开。使用外部JavaScript和CSS作为最佳实践。