1

我创建了一个 if 语句来测试任一字段是否为空白，并确保表单的值正在进入函数。我在进程的两端尝试了一些 HTML 和 JavaScript 的变体，但仍然没有任何反应。我在下面发布了我当前的 HTML 文档和 JavaScript 代码。任何帮助将不胜感激。谢谢！

也不是所有的document.getElementById('').innerHTML = ;和 <td> 标签都设置好了。

HTML

<DOCTYPE html>

<!-- LINKS TO STYLES AND JAVASCRIPT -->

<!-- <script src="weatherPull.js" type="text/javascript"> </script> -->

<script src="getWeatherData.js" type="text/javascript"> </script>

<link rel="stylesheet" href="page3.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Girassol&family=Noto+Sans+JP&display=swap" rel="stylesheet">

<!-- START OF PAGE AND PAGE TITLE -->

<html>

<header>
<title> Weather </title>
</header>
<body>

<!------ TITLE AND NAV BAR ------>

<div id="titleBar">

<h1 id="title"> The Title </h1>

</div>
<div id="navBar">

<nav>
<a href="index.html" > Home </a>

<a href="page1.html" > Page 1 </a>

<a href="/phpmyadmin" > phpMyAdmin </a>

<a href="about.html" > About </a>

<a href="template.html" > Page 3 </a>
</nav>

</div>

<!---- LOCATION SELECTION FORM ---->

<div id="weatherForm">

<h1> Weather Data Pull</h1>

<form action="" method="POST" name="weatherForm">
 
<label id="zipCode" for="zipCode"> Enter Zip Code: </label>
<input type="text" name="zipCode" placeholder="Required" id="zipCodeEnter"><br>

<label for="country" id="country"> Select Country: </label>
<select name="country" form="country" id="countrySelect" >
  <option value="us">US</option>
  <option value="canada">Canada</option>
  <option value="mexico">Mexico</option>
  <option value="france">France</option>
</select><br>

<input type="submit" value="Submit" onclick="getWeather()">

</form>

</div>

<!------- WEATHER RESULTS -------->

<div id="weatherResults">

<h1 id="location"></h1>
<table>
    <tr>
        <td id="longitude">stuff</td>
        <td id="latitude">stuff</td>
    </tr>
    
    <tr>
        <td id="weather">stuff</td>
        <td id="windSpeed">stuff</td>
    </tr>
    
    <tr>
        <td id="windGust">stuff</td>
        <td id="">stuff</td>
    </tr>
    
    <tr>
        <td id="">stuff</td>
        <td id="">stuff</td>
    </tr>
    
    <tr>
        <td id="">stuff</td>
        <td id="">stuff</td>
    </tr>
    
</table>

</div>

<!------------------------------->
    
</body>
</html>

JavaScript

function getWeather() {
    var zipCode = document.getElementById('zipCodeEnter').value;
    var country = document.getElementById('countrySelect').value;
    if(zipCode=="" || country=="") {
        alert("Please complete form");
    }
    else{
        continue;
    }
    document.getElementById("location").innerHTML = "stuff";
    document.getElementById("longitude").innerHTML = "stuff";
    document.getElementById("latitude").innerHTML = "stuff";
    document.getElementById("weather").innerHTML = "stuff";
    document.getElementById("windSpeed").innerHTML = "stuff";
    document.getElementById("windGust").innerHTML = "stuff";
    document.getElementById("").innerHTML = "stuff";
    document.getElementById("").innerHTML = "stuff";
    document.getElementById("").innerHTML = "stuff";
    document.getElementById("").innerHTML = "stuff";
    document.getElementById("").innerHTML = "stuff";
}
4

2 回答 2

1

我认为更好的方法是简单地将required属性放在您的 HTML 输入中，这样您就不需要 javascript 来验证它，因为除非输入具有某些价值，否则表单不会让用户提交。

例子：

<input type="text" name="zipCode" placeholder="Required" id="zipCodeEnter" required>

参考和工作演示： https ://www.w3schools.com/tags/att_input_required.asp

于 2021-05-31T04:00:02.793 回答
0

在这种情况下，不需要使用标签，如果使用标签，在getWeather函数中，必须使用this.preventDefault()方法来防止表单post动作跳转到“另一个”页面。可以用div标签替换form。那么，id的意思，id是标识符的缩写，如果一个页面或框架有多个id值相同的元素，只选择第一个。

于 2021-05-31T05:44:37.257 回答