如何獲得我的代碼，以使用戶提交品種的狗並返回特定品種的圖片

Question

我已經自學了3個月的代碼，如果我的問題很難理解，請原諒我。 我在我的應用程序中添加了一個搜索欄（我認為搜索欄的html代碼是正確的，但希望有人看過它，我會很感激），並且我試圖找出如何使我的應用程序加載單個隨機圖像的方法根據使用者的輸入來指定特定品種，並在應用程式中說明找到品種時的喜好案例，以及沒有找到時的不滿意案例。

這是直接鏈接到它的鏈接，但代碼也可以在本文中查找。我需要添加到我的js中嗎？

`

 'use strict'; function getDogImage() { fetch('https://dog.ceo/api/breed/hound/images/random') .then(response => response.json()) .then(responseJson => displayResults(responseJson)) .catch(error => alert('Something went wrong. Try again later.')); } function displayResults(responseJson) { console.log(responseJson); //replace the existing image with the new one $('.results-img').replaceWith( `<img src="${responseJson.message}" class="results-img">` ) //display the results section $('.results').removeClass('hidden'); } function watchForm() { $('form').submit(event => { event.preventDefault(); getDogImage(); }); } $(function() { console.log('App loaded! Waiting for submit!'); watchForm(); });

 * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; } .container { max-width: 600px; margin: 0 auto; } .hidden { display: none; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Dog API Example</title> <link rel="shortcut icon" href=""> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <h1>Dog API: A Simple Example</h1> <form> <label for="breed">Breed</label> <input type="search" name="phone" id="breed" placeholder="Enter Breed" title="dog breeds"/> <input type="submit" value="Get a dog pic!"> </form> <section class="results hidden"> <h2>Look at this dog!</h2> <img class="results-img" alt="placeholder"> </section> </div> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="index.js"></script> </body> </html>

` https://repl.it/@Mike65/get-fetch-dog-api-example-DOM-3

Answer 1

因此，您需要做的是

從#breed元素中讀取輸入的品種
傳遞給getDogImage
接受getDogImage一個參數...讓它稱為breed
使用此輸入的品種作為URL路徑中breed之后的值...例如.../api/breed/dingo/images

請參閱以下經過測試和工作的代碼

 'use strict'; function getDogImage(breed) { fetch(`https://dog.ceo/api/breed/${breed}/images/random`) .then(response => response.json()) .then(responseJson => displayResults(responseJson)) .catch(error => alert('Something went wrong. Try again later.')); } function displayResults(responseJson) { console.log(responseJson); //replace the existing image with the new one $('.results-img').replaceWith( `<img src="${responseJson.message}" class="results-img">` ) //display the results section $('.results').removeClass('hidden'); } function watchForm() { $('form').submit(event => { event.preventDefault(); getDogImage($('#breed').val()); }); } $(function() { console.log('App loaded! Waiting for submit!'); watchForm(); });

 * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; } .container { max-width: 600px; margin: 0 auto; } .hidden { display: none; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Dog API Example</title> <link rel="shortcut icon" href=""> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <h1>Dog API: A Simple Example</h1> <form> <label for="breed">Breed</label> <input type="search" name="phone" id="breed" placeholder="Enter Breed" title="dog breeds"/> <input type="submit" value="Get a dog pic!"> </form> <section class="results hidden"> <h2>Look at this dog!</h2> <img class="results-img" alt="placeholder"> </section> </div> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="index.js"></script> </body> </html>

如何獲得我的代碼，以使用戶提交品種的狗並返回特定品種的圖片

問題描述

1 個解決方案

解決方案1
0 2019-09-16 02:03:51

如何獲得我的代碼，以使用戶提交品種的狗並返回特定品種的圖片

問題描述

1 個解決方案

解決方案1 0 2019-09-16 02:03:51

解決方案1
0 2019-09-16 02:03:51