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 - 输出不起作用

回答

相关问题