Link z formularza HTML/JS [duplikat]

Question 1

Obecnie staram się stworzyć program, w którym wpisujesz link w HTML-formularz, a gdy naciśniesz przycisk, ona wysyła cię na ten link. Jednak, gdy wciskam przycisk, strona po prostu czyści formularz. Jestem rodem z Python i nowy w HTML/JS, więc to, jak структурирую swój kod, może być przyczyną:

<form>
    <input type="url" id="link" placeholder="Enter link of website:" required>
    <br>
    <button class="outline" id="open">Create gate</button>
    </form>
    <script type="text/javascript">
        document.getElementById("open").onclick = () => 
        location.assign(String(document.getElementById("link").value));
    </script> </form>

Question 2

Ponieważ korzystasz z formularza. Twój Przycisk

<button class="outline" id="open">Create gate</button>

działa jak przycisk wysłania formularza i tym samym aktualizuje stronę przed wykonaniem location.assign() metoda. Istnieje wiele sposobów, aby to naprawić.

Jeden prosty sposób-poinformować przeglądarkę, że ten przycisk jest przyciskiem wysyłki, możemy to zrobić za pomocą type="button" atrybut w naszej przycisku.

Utworzyć bramę
Można użyć e.preventDefault() w swojej formie prześlij, aby zatrzymać aktualizację strony.

Spróbuj wykonać następujący kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location Object</title>
</head>
<body>
    <form>
        <input type="url" id="link" placeholder="Enter link of website:" required>
        <br>
        <button class="outline" id="open">Create gate</button>
    </form>
    <script type="text/javascript">
        document.getElementById("open").addEventListener('click', (e) => {
             e.preventDefault();
            location.assign(String(document.getElementById("link").value));
        });
       
    </script>
    </form>
</body>
</html>

Question 3

Twój kod jest dokładnie taki, jak wskazano, wklejony w minimalny wzór szablonu HTML5, działa w edytorze kodu Textastic i w Safari, działającym na lokalnym hoście.

Może jakiś inny JavaScript w pobliżu swojego detektora zdarzeń narusza funkcję zegara. Może być zawarcie w nawiasach jednego operatora funkcje mogło by pomóc?

Imran Rafiq Rather · Answer 1 · 2021-11-24T05:52:15

Ponieważ korzystasz z formularza. Twój Przycisk

<button class="outline" id="open">Create gate</button>

działa jak przycisk wysłania formularza i tym samym aktualizuje stronę przed wykonaniem location.assign() metoda. Istnieje wiele sposobów, aby to naprawić.

Jeden prosty sposób-poinformować przeglądarkę, że ten przycisk jest przyciskiem wysyłki, możemy to zrobić za pomocą type="button" atrybut w naszej przycisku.

Utworzyć bramę
Można użyć e.preventDefault() w swojej formie prześlij, aby zatrzymać aktualizację strony.

Spróbuj wykonać następujący kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location Object</title>
</head>
<body>
    <form>
        <input type="url" id="link" placeholder="Enter link of website:" required>
        <br>
        <button class="outline" id="open">Create gate</button>
    </form>
    <script type="text/javascript">
        document.getElementById("open").addEventListener('click', (e) => {
             e.preventDefault();
            location.assign(String(document.getElementById("link").value));
        });
       
    </script>
    </form>
</body>
</html>

Scott Wright · Answer 2 · 2021-11-24T05:48:39

Twój kod jest dokładnie taki, jak wskazano, wklejony w minimalny wzór szablonu HTML5, działa w edytorze kodu Textastic i w Safari, działającym na lokalnym hoście.

Może jakiś inny JavaScript w pobliżu swojego detektora zdarzeń narusza funkcję zegara. Może być zawarcie w nawiasach jednego operatora funkcje mogło by pomóc?

Link z formularza HTML/JS [duplikat]

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii