0

Her is an example:

I got a slider element and its initialization in index.html her

<head>
    <meta charset="UTF-8">
    <title>Simulation Animator</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/codemirror.css">
    <link rel="stylesheet" type="text/css" href="css/darcula.css">
    
    <link rel="stylesheet" type="text/css" href="../semantic/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
    <script src="../semantic/dist/semantic.min.js"></script>
    <script src="app.js"></script> 
</head>

<body>
<div class="ui red labeled slider" id="speed_slider1" ></div>
    <script>
        var speedLabels = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"];
        let speed = 1;
        $('#speed_slider1').slider({
            min: 1,
            max: 10,
            interpretLabel: function(value) {
                return speedLabels[value];
            }
        });
    </script>
</body>

In my js file I wanna get the current value of the slider

$("#speed_slider1").slider({
        onChange: function(value){
            console.log(value);
        }
    });

But on console it says

Uncaught TypeError: $(...).slider is not a function

Isn't it possible to put the Javascript code in a separate js file instead of having them in index.html? If possible how?

Furthermore, can the javascript code for initialization of this slider also put in the separate js file? If possible how?

Joyce Lucy
  • 1
  • 1
  • Error makes it sounds like you are using slider before it is included in the page OR you have two versions of jQuery – epascarello Jan 11 '21 at 17:55
  • Thanks for help, I have found the problem. It is because somebody has made var $ = require('jquery'); in the external JS file, so it did have two versions of jQuery. I have removed it, and everything works now. – Joyce Lucy Jan 12 '21 at 14:43

0 Answers0