JS & Bootstrap - la sortie ne fonctionne pas

Est-ce que quelqu'un sait comment faire une bonne sortie dans un navigateur en utilisant JS et bootstrap? L'entrée ne peut pas être enregistrée dans H5 dans la classe de formulaire. Cela ne marche pas avec le bootstrap, mais avec du HTML pur et du JS, ça marche, c'est pourquoi je demande de l'aide. Merci d'avance.JS & Bootstrap - la sortie ne fonctionne pas

function myFunction() { 
 
    let input = document.getElementById('input'); 
 
    let output = document.getElementById('output'); 
 
    output.innerHTML = input.value; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     
 
     <meta charset="utf-8"> 
 
     <title>Issue App</title> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     
 
    </head> 
 
    <body> 
 
     <!-- Issue App interface --> 
 
     
 
     <div class="container"> 
 
      <h1>JS Issue App <small>by Adam</small></h1> 
 
      <h2 style="font-size:medium";>Give a worthy feedback and make a huge change!</h2> 
 
      <div class="jumbotron"> 
 
       <h3>Add New Issue:</h3> 
 
       <form id="issueInputForm"> 
 
        <div class="form-group"> 
 
         <label for="input">Description</label> 
 
       
 
       <!-- input --> 
 
         <input type="text" class="form-control" placeholder="Describe the issue" id="input" > 
 
        </div>        
 
        
 
       <!-- button -->  
 
        <button type="submit" class="btn btn-primary" onclick="myFunction()">Add</button> 
 
        
 
       <!-- output doesn't save in a browser, and resets after the button is clicked -->  
 
        <h5 id="output"></h5> 
 
       
 
       </form> 
 
      </div> 
 
      <div class="col-lg-12"> 
 
       <div id="issuesList"> 
 
       </div> 
 
      </div> 
 
       <div class="footer"> 
 
        <p>&copy adam.pl</p> 
 
       </div> 
 
        </div> 
 
     
 
            
 

 
       
 
       
 
     <!-- Scripts --> 
 
     
 
     <script src="http://chancejs.com/chance.min.js"></script> 
 
     <!-- Jquery --> 
 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
     <!-- Bootstrap --> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     <!-- JS --> 
 
     <script type="text/javascript" src="script.js"></script> 
 
     
 
    </body> 
 
</html>

Source

2017-10-04 Adam

Parce que vous définissez le bouton pour être un bouton d'envoi, vous faites le formulaire et soumettre ainsi recharger la page –

Deux possible problèmes.

Modifier le button type="submit" à button type ="button" ou ajouter event.preventDefault() dans la fonction myFunction

On ne sait pas ce que chance.min.js est en train de faire ou si elle dépend de jquery/bootstrap. Il est préférable de réorganiser les fichiers de script

<!-- Jquery --> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <!-- Bootstrap --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <!-- JS --> 
    <script type="text/javascript" src="script.js"></script>

Source

2017-10-04 15:29:01 brk

j'ai changé le type de bouton de submit à button. De cette façon, la forme ne soit pas soumis qui changerait la page en cours ... Vous pouvez également utiliser event.preventDefault() dans votre gestionnaire, où l'événement est le premier paramètre ...

function myFunction() { 
 
    let input = document.getElementById('input'); 
 
    let output = document.getElementById('output'); 
 
    output.innerHTML = input.value; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     
 
     <meta charset="utf-8"> 
 
     <title>Issue App</title> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     
 
    </head> 
 
    <body> 
 
     <!-- Issue App interface --> 
 
     
 
     <div class="container"> 
 
      <h1>JS Issue App <small>by Adam</small></h1> 
 
      <h2 style="font-size:medium";>Give a worthy feedback and make a huge change!</h2> 
 
      <div class="jumbotron"> 
 
       <h3>Add New Issue:</h3> 
 
       <form id="issueInputForm"> 
 
        <div class="form-group"> 
 
         <label for="input">Description</label> 
 
       
 
       <!-- input --> 
 
         <input type="text" class="form-control" placeholder="Describe the issue" id="input" > 
 
        </div>        
 
        
 
       <!-- button -->  
 
        <button type="button" class="btn btn-primary" onclick="myFunction()">Add</button> 
 
        
 
       <!-- output doesn't save in a browser, and resets after the button is clicked -->  
 
        <h5 id="output"></h5> 
 
       
 
       </form> 
 
      </div> 
 
      <div class="col-lg-12"> 
 
       <div id="issuesList"> 
 
       </div> 
 
      </div> 
 
       <div class="footer"> 
 
        <p>&copy adam.pl</p> 
 
       </div> 
 
        </div> 
 
     
 
            
 

 
       
 
       
 
     <!-- Scripts --> 
 
     
 
     <script src="http://chancejs.com/chance.min.js"></script> 
 
     <!-- Jquery --> 
 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
     <!-- Bootstrap --> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     <!-- JS --> 
 
     <script type="text/javascript" src="script.js"></script> 
 
     
 
    </body> 
 
</html>

Source

2017-10-04 15:28:40 Salketer

JS & Bootstrap - la sortie ne fonctionne pas

Répondre

Questions connexes