gpt4 book ai didi

javascript - JS 和 Bootstrap - 输出不起作用

转载 作者:行者123 更新时间:2023-12-03 03:21:12 25 4
gpt4 key购买 nike

有人知道如何使用 JS 和 bootstrap 在浏览器中做出正确的输出吗?输入无法保存在表单类内的 H5 中。它不适用于 bootstrap,但使用纯 HTML 和 JS,它可以工作,这就是我寻求帮助的原因。提前致谢。

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>

最佳答案

两个可能的问题。

  1. button type="submit" 更改为 button type ="button" 或在函数内添加 event.preventDefault() myFunction
  2. 尚不清楚chance.min.js正在做什么,或者它是否依赖于jquery/bootstrap。最好重新排序脚本文件

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

关于javascript - JS 和 Bootstrap - 输出不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46568539/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com