Question

我对javascript还是很陌生，并且对以下代码感到沮丧

<!DOCTYPE html>

<html>

<script>
var time = '0'
var area = 'neast'

function update_area(input) {
	area = input;
    load_updated_image(area,time);
};

function update_time(input) {
	time = input;
    load_updated_image(area,time);
};

function load_updated_image(area,time) {
	var url = 'http://personal.psu.edu/kps5442/modelimages/hrrr_'+area+'_wetbulb'+time+'.png';
	document.getElementById("theImage").src = url;
    document.getElementById("url").innerHTML = url;
};
</script>


<body onload="load_updated_image(area,time)">

<p>URL Output:</p>
<p id="url"></p>

<font size = 4><b>Forecast Hour: &nbsp;</b> 
<font size = 3>
<a href="#" onmouseover="update_time(0);" /> 00</a>&nbsp;
<a href="#" onmouseover="update_time(1);" /> 01</a>&nbsp;
<a href="#" onmouseover="update_time(2);" /> 02</a>&nbsp;


<img id="theImage" src=undefined width="850" height="600" />	

<br> <font size = 4><b>Region Selection: &nbsp;</b>

<a href="#" onclick="update_area(neast);" /> Northeast</a>&nbsp;
<a href="#" onclick="update_area(seast);" /> Southeast</a>&nbsp;

</body>
</html>

我在美国不同地区有18个不同的“小时”图像。目的是在将鼠标置于小时链接上时更改图像的小时，并在单击区域链接时更新区域。

函数update_time（）可以正常工作，当我将鼠标移到链接上时更改了图像。但是，函数update_area（）失败，出现以下错误：

“未捕获的ReferenceError：未定义neast”

我不确定为什么会这样，因为update_time和update_area函数的构建方式完全相同，并且我在脚本开始处全局定义了time和area变量。

任何帮助将不胜感激！

Answer 1

您必须将参数放在引号中。

onclick="update_area('neast');"
onclick="update_area('seast');"

<!DOCTYPE html>

<html>

<script>
var time = '0'
var area = 'neast'

function update_area(input) {
	area = input;
    load_updated_image(area,time);
};

function update_time(input) {
	time = input;
    load_updated_image(area,time);
};

function load_updated_image(area,time) {
	var url = 'http://personal.psu.edu/kps5442/modelimages/hrrr_'+area+'_wetbulb'+time+'.png';
	document.getElementById("theImage").src = url;
    document.getElementById("url").innerHTML = url;
};
</script>


<body onload="load_updated_image(area,time)">

<p>URL Output:</p>
<p id="url"></p>

<font size = 4><b>Forecast Hour: &nbsp;</b> 
<font size = 3>
<a href="#" onmouseover="update_time(0);" /> 00</a>&nbsp;
<a href="#" onmouseover="update_time(1);" /> 01</a>&nbsp;
<a href="#" onmouseover="update_time(2);" /> 02</a>&nbsp;


<img id="theImage" src=undefined width="850" height="600" />	

<br> <font size = 4><b>Region Selection: &nbsp;</b>

<a href="#" onclick="update_area('neast');" /> Northeast</a>&nbsp;
<a href="#" onclick="update_area('seast');" /> Southeast</a>&nbsp;

</body>
</html>

在JavaScript中，变量不限于单个“类型”，但字符串始终包含在引号中，而数字则不包含在内。同样，变量不能是数字或以数字开头。这就是为什么当您使用字符串作为参数时，必须将其包含在引号中，否则会认为您正在发送变量。

Answer 2

您要以<!doctype html>开始文档，所以您要说的是编写HTML5，但是由于使用HTML3.2和过时的调用方法，这里发生了很多令人难以置信的错误javascript。

在现代HTML5规则下，没有自动关闭元素。这不是一个硬错误，但不要在/>的末尾添加<img...。 <font>也已经20年来不存在了。它在1998年的HTML4.1中被删除。然后是一些语义：如果您需要按钮功能（即可单击，但不导航到某些页面），请使用<button>。那就是它的目的。不要使用<a>，绝对不要使用href="#"，因为这是浏览器滚动到页面顶部的有效指示。最后，on...=...处理函数是一个古老的属性，很遗憾，该属性仍受支持，但您永远不要使用。声明所有HTML后，在Javascript中使用addEventListener。

所以让我们同时修复所有问题：

<!-- this line literally tells the browser "I am using HTML5" -->
<!DOCTYPE html>
<html>
  <!-- always have a header section -->
  <head>
    <!-- no / at the end of meta elements -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Always just fill this in, it's good practice</title>
    <style>
      /* you want this in its own file, see the note at the end of this post */
      h1 {
        font-size: 100%;
        font-weight: bold;
       }
    </style>
  </head>
  <body>
    <!-- sectioning isn't mandatory, but extremely good practice -->
    <section id="output">
      <h1>URL Output:</h1>

      <p>Forecast Hour:</p>

      <div class="controls">
        <!-- let's use data attributes, and be explicit about the values here -->
        <button class="forecast update" data-value="0">0h</button>
        <button class="forecast update" data-value="1">1h</button>
        <button class="forecast update" data-value="2">2h</button>
      </p>

      <!-- if you've never see the figure/figcaption elements: they exist -->
      <figure id="forecast-image">
        <!-- no / at the end of this element -->
        <img src="placeholder.jpg" width="850" height="600" alt="forecast map">
        <figcaption></figcaption>
      </figure>
    </section>

    <section>
      <h1>Region Selection</h1>

      <div class="controls">
        <button class="area update" data-value="neast">Northeast</buton>
        <button class="area update" data-value="seast">Southeast<button>
      </div>
    </section>

    <!-- don't put your script in the page. put it in its own file -->
    <script src="updates.js"></script>
  </body>
</html>

然后我们为javascript创建另一个文件，名为updates.js：

// this goes last, so that the DOM is done by the time you invoke your script.
var currentTime = 0;
var currentArea = `NorthEast`;

// this function doesn't need parameters: we already know what they are
function load_updated_image() {
  var url = `http://personal.psu.edu/kps5442/modelimages/hrrr_${currentArea}_wetbulb${currentTime}.png`;
  let figure = document.getElementById(`forecast-image`);
  // update the image
  let img = figure.querySelector(`img`);
  img.src = url;
  // update the image caption with a link
  let caption = figure.querySelector(`figcaption`);
  caption.innerHTML = ``;
  let link = document.createElement(`a`);
  link.href = url;
  caption.appendChild(link);
}

// update the area, and called image update
function update_area(area) {
  currentArea = area;
  load_updated_image();
};

// update the time, and called image update
function update_time(time) {
  currentTime = timel
  load_updated_image();
};

// add the initial page load handling
document.addEventListener(`ready`, evt => load_updated_image());

// add the click handling for forecast time buttons
let forecastButtons = document.querySelectorAll(`button.forecastupdate`);
forecastButtons.forEach(button => {
  // get the button's data-value 
  value = button.dataset.value;

  // and then set up a click listener to update the forecast time
  button.addEventListener(`click`, evt => update_time(value));
});

// add the click handling for forecast area buttons
let areaButtons = document.querySelectorAll(`button.area.update`);
forecastButtons.forEach(button => {
  // get the button's data-value 
  value = button.dataset.value;

  // and then set up a click listener to update the forecast area
  button.addEventListener(`click`, evt => update_area(value));
});

然后，为了更加正确，不要使用<style>...</style>，而是创建一个名为“ forecast.css”的新文件，然后使用<link href="forecast.css" rel="stylresheet">链接到页面中的文件（注意：这是还是HTML5，您不要在末尾放置/>。链接元素根本没有具有结束标记）

通过javascript函数更新html图像

2 个答案: