JS＆Bootstrap - 輸出不起作用

有人知道如何在使用JS和Bootstrap的瀏覽器中輸出正確的輸出嗎？輸入不能保存在表單類中的H5中。它不適用於引導程序，但純HTML和JS，它的工作原理，這就是爲什麼我要求幫助。提前致謝。JS＆Bootstrap - 輸出不起作用

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>

來源

2017-10-04 Adam

因爲你設置的按鈕是一個提交按鈕，你讓表單提交，從而重新加載頁面 –

兩種可能的問題。

更改button type="submit"到button type ="button"或添加event.preventDefault()功能myFunction

目前尚不清楚什麼chance.min.js做，或是否是依賴於jQuery的/引導內。這是更好地重新排序腳本文件

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

來源

2017-10-04 15:29:01 brk

我改變你的按鈕類型從submit到button。這樣的形式沒有得到提交這將改變當前頁面...你也可以使用在你的處理器，其中，事件是第一個參數event.preventDefault() ...

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>

來源

2017-10-04 15:28:40 Salketer

JS＆Bootstrap - 輸出不起作用

回答

相關問題