JavaScript код не возвращает ожидаемый URL как ответ - PullRequest
Новая
       25

JavaScript код не возвращает ожидаемый URL как ответ

0 голосов
/ 15 апреля 2020

Я пытаюсь заставить [this] [1] HTML и JavaScript код работать локально, но у меня нет успеха. Например, если вы запустите их фрагмент кода и выберете такой язык, как «Engli sh United States» и нажмете «Отправить», вы должны увидеть ответ.

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

Тег сценария в вашем коде расположен над закрывающим тегом формы. 

    <script>
  document.querySelector("form").addEventListener("submit",function(e) {
  e.preventDefault(); // stop submission
  const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
  const language = document.getElementById("language").value;
  url.searchParams.set("language",language);
  console.log(url); // change to a fetch or similar
})
  </script>
</form>

Переместите весь раздел сценария чуть выше закрывающего тега body. 

 <!DOCTYPE html>
<html>
<body>
<form>
  <select name="language" id="language">
    <option value="en-GB">Please select language (Default en-GB</option> 
    <option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
    <option value="sr-Latn-RS">Serbian (Latin)</option>
    <option value="bs-Latn">Bosnian</option>
    <option value="zh-Hans">Chinese (Simplified)</option>
    <option value="zh-Hant">Chinese (Traditional)</option>
    <option value="fil-PH">Filipino</option>
    <option value="en-GB">English United Kingdom</option>
    <option value="en-FJ">Fijian</option>
    <option value="en-AU">English Australia</option>
    <option value="en-WS">Samoan</option>
    <option value="en-US">English United States</option>
    <option value="el-GR">Greek</option>
    <option value="es-ES">Spanish</option>
    <option value="et-EE">Estonian</option>
    <option value="fa-IR">Persian</option>
    <option value="fi-FI">Finnish</option>
    <option value="fr-FR">French</option>
    <option value="fr-HT">Haitian</option>
    <option value="af-ZA">Afrikaans</option>
    <option value="ar-SY">Arabic Syrian Arab Republic</option>
    <option value="ar-EG">Arabic Egypt</option>
    <option value="da-DK">Danish</option>
    <option value="de-DE">German</option>
    <option value="bg-BG">Bulgarian</option>
    <option value="bn-BD">Bangla</option>
    <option value="mg-MG">Malagasy</option>
    <option value="ms-MY">Malay</option>
    <option value="mt-MT">Maltese</option>
    <option value="ca-ES">Catalan</option>
    <option value="cs-CZ">Czech</option>
    <option value="nl-NL">Dutch</option>
    <option value="nb-NO">Norwegian</option>
    <option value="id-ID">Indonesian</option>
    <option value="it-IT">Italian</option>
    <option value="lt-LT">Lithuanian</option>
    <option value="lv-LV">Latvian</option>
    <option value="ja-JP">Japanese</option>
    <option value="ur-PK">Urdu</option>
    <option value="uk-UA">Ukrainian</option>
    <option value="hi-IN">Hindi</option>
    <option value="he-IL">Hebrew</option>
    <option value="hu-HU">Hungarian</option>
    <option value="hr-HR">Croatian</option>
    <option value="ko-KR">Korean</option>
    <option value="vi-VN">Vietnamese</option>
    <option value="tr-TR">Turkish</option>
    <option value="ta-IN">Tamil</option>
    <option value="th-TH">Thai</option>
    <option value="to-TO">Tongan</option>
    <option value="ru-RU">Russian</option>
    <option value="ro-RO">Romanian</option>
    <option value="pt-BR">Portuguese</option>
    <option value="pl-PL">Polish</option>
    <option value="sv-SE">Swedish</option>
    <option value="sw-KE">Kiswahili</option>
    <option value="sl-SI">Slovenian</option>
    <option value="sk-SK">Slovak</option>
  </select>
  <input type="submit" />
</form>
<script>
      document.querySelector("form").addEventListener("submit",function(e) {
      e.preventDefault(); // stop submission
      const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
      const language = document.getElementById("language").value;
      url.searchParams.set("language",language);
      console.log(url); // change to a fetch or similar
    })
      </script>
</body>
</html>

Поскольку у вас есть скрипт внутри формы, код не знает, что делать, когда он отправлен.

Поскольку вы хотите получить результат ниже формы, а не на консоли, вам придется создать DOM элемент внутри тела html и затем с помощью селектора измените содержимое элемента, как-то так, 

   <div>
<form>
  <select name="language" id="language">
    <option value="en-GB">Please select language (Default en-GB</option> 
    <option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
    <option value="sr-Latn-RS">Serbian (Latin)</option>
    <option value="bs-Latn">Bosnian</option>
    <option value="zh-Hans">Chinese (Simplified)</option>
    <option value="zh-Hant">Chinese (Traditional)</option>
    <option value="fil-PH">Filipino</option>
    <option value="en-GB">English United Kingdom</option>
    <option value="en-FJ">Fijian</option>
    <option value="en-AU">English Australia</option>
    <option value="en-WS">Samoan</option>
    <option value="en-US">English United States</option>
    <option value="el-GR">Greek</option>
    <option value="es-ES">Spanish</option>
    <option value="et-EE">Estonian</option>
    <option value="fa-IR">Persian</option>
    <option value="fi-FI">Finnish</option>
    <option value="fr-FR">French</option>
    <option value="fr-HT">Haitian</option>
    <option value="af-ZA">Afrikaans</option>
    <option value="ar-SY">Arabic Syrian Arab Republic</option>
    <option value="ar-EG">Arabic Egypt</option>
    <option value="da-DK">Danish</option>
    <option value="de-DE">German</option>
    <option value="bg-BG">Bulgarian</option>
    <option value="bn-BD">Bangla</option>
    <option value="mg-MG">Malagasy</option>
    <option value="ms-MY">Malay</option>
    <option value="mt-MT">Maltese</option>
    <option value="ca-ES">Catalan</option>
    <option value="cs-CZ">Czech</option>
    <option value="nl-NL">Dutch</option>
    <option value="nb-NO">Norwegian</option>
    <option value="id-ID">Indonesian</option>
    <option value="it-IT">Italian</option>
    <option value="lt-LT">Lithuanian</option>
    <option value="lv-LV">Latvian</option>
    <option value="ja-JP">Japanese</option>
    <option value="ur-PK">Urdu</option>
    <option value="uk-UA">Ukrainian</option>
    <option value="hi-IN">Hindi</option>
    <option value="he-IL">Hebrew</option>
    <option value="hu-HU">Hungarian</option>
    <option value="hr-HR">Croatian</option>
    <option value="ko-KR">Korean</option>
    <option value="vi-VN">Vietnamese</option>
    <option value="tr-TR">Turkish</option>
    <option value="ta-IN">Tamil</option>
    <option value="th-TH">Thai</option>
    <option value="to-TO">Tongan</option>
    <option value="ru-RU">Russian</option>
    <option value="ro-RO">Romanian</option>
    <option value="pt-BR">Portuguese</option>
    <option value="pl-PL">Polish</option>
    <option value="sv-SE">Swedish</option>
    <option value="sw-KE">Kiswahili</option>
    <option value="sl-SI">Slovenian</option>
    <option value="sk-SK">Slovak</option>
  </select>
  <input type="submit" />
</form>
<p id="result" />
  <script>
  document.querySelector("form").addEventListener("submit",function(e) {
  e.preventDefault(); // stop submission
  const language = document.getElementById("language").value;
  const url = `https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=${language}&reTranslate=...&includeStreamingUrls=...&accessToken=...`;
  //url.searchParams.set("language",language);
  console.log(url); // change to a fetch or similar
  document.getElementById('result').innerHTML = url
})
  </script>
</div>
1 голос
/ 15 апреля 2020

Интерфейс URL задокументирован здесь - https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

Этот объект, созданный новым URL (...), не выглядит так хорошо в console.log. Попробуйте вместо этого. 

            console.log(url.href);
            console.log(typeof url);

Это то, что я вижу, когда делаю console.log (url) (объект) - URL {href: "https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=en-GB&reTranslate=...&includeStreamingUrls=...&accessToken= ..." , источник: "https://api.videoindexer.ai", протокол: "https:", имя пользователя: "", пароль: "", узел: "api.videoindexer.ai", имя узла: "api.videoindexer.ai ", port:" ", pathname:" / location / Accounts / accountId / Videos / videoId / Index ", поиск:"? language = en-GB & reTranslate = ... & includeStreamingUrls = ... & accessToken = ... "} 

<!DOCTYPE html>
<html>
<body>
<form>
    <select name="language" id="language">
        <option value="en-GB">Please select language (Default en-GB</option>
        <option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
        <option value="sr-Latn-RS">Serbian (Latin)</option>
        <option value="bs-Latn">Bosnian</option>
        <option value="zh-Hans">Chinese (Simplified)</option>
        <option value="zh-Hant">Chinese (Traditional)</option>
        <option value="fil-PH">Filipino</option>
        <option value="en-GB">English United Kingdom</option>
        <option value="en-FJ">Fijian</option>
        <option value="en-AU">English Australia</option>
        <option value="en-WS">Samoan</option>
        <option value="en-US">English United States</option>
        <option value="el-GR">Greek</option>
        <option value="es-ES">Spanish</option>
        <option value="et-EE">Estonian</option>
        <option value="fa-IR">Persian</option>
        <option value="fi-FI">Finnish</option>
        <option value="fr-FR">French</option>
        <option value="fr-HT">Haitian</option>
        <option value="af-ZA">Afrikaans</option>
        <option value="ar-SY">Arabic Syrian Arab Republic</option>
        <option value="ar-EG">Arabic Egypt</option>
        <option value="da-DK">Danish</option>
        <option value="de-DE">German</option>
        <option value="bg-BG">Bulgarian</option>
        <option value="bn-BD">Bangla</option>
        <option value="mg-MG">Malagasy</option>
        <option value="ms-MY">Malay</option>
        <option value="mt-MT">Maltese</option>
        <option value="ca-ES">Catalan</option>
        <option value="cs-CZ">Czech</option>
        <option value="nl-NL">Dutch</option>
        <option value="nb-NO">Norwegian</option>
        <option value="id-ID">Indonesian</option>
        <option value="it-IT">Italian</option>
        <option value="lt-LT">Lithuanian</option>
        <option value="lv-LV">Latvian</option>
        <option value="ja-JP">Japanese</option>
        <option value="ur-PK">Urdu</option>
        <option value="uk-UA">Ukrainian</option>
        <option value="hi-IN">Hindi</option>
        <option value="he-IL">Hebrew</option>
        <option value="hu-HU">Hungarian</option>
        <option value="hr-HR">Croatian</option>
        <option value="ko-KR">Korean</option>
        <option value="vi-VN">Vietnamese</option>
        <option value="tr-TR">Turkish</option>
        <option value="ta-IN">Tamil</option>
        <option value="th-TH">Thai</option>
        <option value="to-TO">Tongan</option>
        <option value="ru-RU">Russian</option>
        <option value="ro-RO">Romanian</option>
        <option value="pt-BR">Portuguese</option>
        <option value="pl-PL">Polish</option>
        <option value="sv-SE">Swedish</option>
        <option value="sw-KE">Kiswahili</option>
        <option value="sl-SI">Slovenian</option>
        <option value="sk-SK">Slovak</option>
    </select>
    <input type="submit" />
    <script>
        document.querySelector("form").addEventListener("submit",function(e) {
            e.preventDefault(); // stop submission
            const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
            const language = document.getElementById("language").value;
            url.searchParams.set("language",language);
            console.log(url); // change to a fetch or similar
            // console.log(url.href);
            // console.log(typeof url);
        })
    </script>
</form>
</body>
</html>
...