Collegamento dal Modulo HTML/JS [duplica]

Question 1

Attualmente sto cercando di fare un programma in cui inserire un link in un form HTML, e quando si fa clic su un pulsante che ti manda a quel link. Tuttavia, quando faccio clic sul pulsante pagina solo chiarisce la forma. Io sono un Pitone nativo e un novizio di HTML/JS in modo che il modo in cui sto strutturando il mio codice può essere perché:

<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

Poiché si utilizza un modulo. Il Pulsante

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

agisce come forma di pulsante di invio e, quindi, si aggiorna la pagina prima di eseguire il location.assign() metodo. Ci sono molti modi per risolvere questo problema.

Un modo semplice è esclusivamente per dire al browser che questo pulsante è il pulsante invia, si può fare utilizzando type="button" attributo nel nostro pulsante.

Creare cancello
È possibile utilizzare e.preventDefault() il modulo invia per interrompere rinfrescante della pagina.

Prova il seguente codice:

<!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

Il codice, esattamente come previsto, incollato in un minimo di HTML5 boilerplate modello, funziona in Textastic editor di codice e in Safari in esecuzione su localhost.

Forse in qualche altra JavaScript nelle vicinanze del tuo listener di eventi di rottura freccia funzione. Forse bracketing una funzione di istruzione può aiutare?

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

Poiché si utilizza un modulo. Il Pulsante

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

agisce come forma di pulsante di invio e, quindi, si aggiorna la pagina prima di eseguire il location.assign() metodo. Ci sono molti modi per risolvere questo problema.

Un modo semplice è esclusivamente per dire al browser che questo pulsante è il pulsante invia, si può fare utilizzando type="button" attributo nel nostro pulsante.

Creare cancello
È possibile utilizzare e.preventDefault() il modulo invia per interrompere rinfrescante della pagina.

Prova il seguente codice:

<!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

Il codice, esattamente come previsto, incollato in un minimo di HTML5 boilerplate modello, funziona in Textastic editor di codice e in Safari in esecuzione su localhost.

Forse in qualche altra JavaScript nelle vicinanze del tuo listener di eventi di rottura freccia funzione. Forse bracketing una funzione di istruzione può aiutare?

Collegamento dal Modulo HTML/JS [duplica]

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria