时间戳

首页 > 解决方案 > 使用 HTML + JS 进行动态搜索

javascript - 使用 HTML + JS 进行动态搜索

问题描述

我开始学习 html css js，如果输入为空并且如果输入具有某些值，则尝试显示我的实际位置 temp 显示具有新 temp 的位置。我的问题是，当我输入新值时，页面无法正确重新加载数据。我不知道如何在不重新加载页面的情况下重复条件语句。抱歉英文错误。

<body>
    <h1>Sample Page</h1>
    <form class="form" name="form" id="formulario">
        <label for="title">Insira a cidade: </label>
        <input type="text" id="cidade" name="cidade">
        <button type="button" id="botao" >Enviar</button>
        <br>
        <p id="myLocation"></p>
    </form>
    <span id="windSpeed"></span>
    <span id="buscar"></span>
    </div>
    <div>

    </div>
</body>
<script src="teste.js"></script> 



var x = document.getElementById('myLocation')

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
        document.getElementById('botao').addEventListener('click', function (event) {
            event.preventDefault()
        })
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function appendData(data) {
    var mainContainer = document.getElementById("windSpeed")
    mainContainer.innerHTML = 'Temperatura ' + data.main.temp + ' Cº '
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
    const API_LOCAL = `https://api.openweathermap.org/data/2.5/weather?lat=${position.coords.latitude}&lon=${position.coords.longitude}&appid=03838cfa6af6494abe9a10e2f9d3ef17&units=metric&lang=pt_br`

    var requestOptions = {
        method: 'GET',
        redirect: 'follow'
    };

    fetch(API_LOCAL, requestOptions)
        .then(response => response.json())
        .then(result => appendData(result))
        .catch(error => console.log('error', error));
}

function searchParams() {
    var requestOptions = {
        method: 'GET',
        redirect: 'follow'
    };
    let city = document.getElementById('cidade').value
    const API_CITY = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=03838cfa6af6494abe9a10e2f9d3ef17&units=metric&lang=pt_br`
    fetch(API_CITY, requestOptions)
        .then(response => response.json())
        .then(result => appendData(result))
        .catch(error => console.log('error', error));
}


var a = document.getElementById('cidade').value
if (a == null || a == ''){
    getLocation()
}else{
    searchParams()
}

标签： javascripthtmldomdom-events

解决方案

使用这个 js 函数我得到了我所期望的。现在，当客户端加载页面时，数据会显示当前信息，然后如果他想搜索特定城市，则元素 html 将更新为新数据。

<body>
    <h1>clima tempo</h1>
    <form class="form" name="form" id="formulario">
        <label for="title">Insira a cidade: </label>
        <input type="text" id="cidade" name="cidade" placeholder="cidade..">
        <button type="button" id="botao" onclick="recarregar()">Enviar</button>
        <br>
        <p id="myLocation"></p>
    </form>
    <span id="windSpeed"></span>
    <span id="buscar"></span>
    </div>
    <div>

    </div>
</body>
<script src="teste.js"></script>

function recarregar() {
    var empt = document.forms["form"]["cidade"].value
    if (empt == "") {
        getLocation()
    } else {
        searchParams()
        return true
    }
}

window.onload = recarregar

推荐阅读