JS & Bootstrap - output doesn't work

Question

Does someone know how to make a right output in a browser using JS and bootstrap? The input can't be saved in H5 within form class. It doesn't work with bootstrap, but with pure HTML and JS, it works, that's why I am asking for help. Thanks in advance.

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>

Because you set the button to be a submit button, you make the form submit and thus reload the page — Patrick Evans
– Patrick Evans, Commented Oct 4, 2017 at 15:25

brk · Accepted Answer · 2017-10-04 15:29:01Z

1

Two possible issues.

Change the button type="submit" to button type ="button" or add event.preventDefault() inside the function myFunction

It is not clear what chance.min.js is doing or whether it is dependent on jquery/bootstrap. It is better to reorder the script files

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

answered Oct 4, 2017 at 15:29

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Salketer · Accepted Answer · 2017-10-04 15:28:40Z

I changed your button type from submit to button. This way the form does not get submitted which would change the current page... You could also use event.preventDefault() in your handler, where event is the first parameter...

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>

Collectives™ on Stack Overflow

JS & Bootstrap - output doesn't work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related