我无法在HTML文件中使用JavaScript代码_Javascript_Html

我无法在HTML文件中使用JavaScript代码

javascript html

我无法在HTML文件中使用JavaScript代码,javascript,html,Javascript,Html,我正在尝试制作一个旋转木马，但我根本无法让JavaScript工作。我真的很不擅长JS，需要帮助找出为什么我不能让它工作。这不是完整的最终产品，现在我只是想让它滚动，当我点击按钮，这是它。因为我不知道JS，所以我一直在关注youtube的教程，我一直在关注它，但仍然无法让它移动。我尝试了几种不同的方法，甚至尝试将JS代码直接放在HTML中，我都不知所措 <!DOCTYPE html> <html> <head> <link rel="styles

我正在尝试制作一个旋转木马，但我根本无法让JavaScript工作。我真的很不擅长JS，需要帮助找出为什么我不能让它工作。这不是完整的最终产品，现在我只是想让它滚动，当我点击按钮，这是它。因为我不知道JS，所以我一直在关注youtube的教程，我一直在关注它，但仍然无法让它移动。我尝试了几种不同的方法，甚至尝试将JS代码直接放在HTML中，我都不知所措

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="slider.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <div class="carousel-container">
        <div class="carousel-slide">
            <img src="im3.JPG" id="lastclone">
            <img src="im1.JPG">
            <img src="im3.JPG">
            <img src="im1.JPG" id="fistclone">
        </div>


    </div>

    <button id="prevBtn" onclick="changestate()">prev</button>
    <button id="nextBtn" onclick="changestate()">next</button>

    <script type="text/javascript" src="app.js"></script>
</body>
</html>

您有两个单击侦听器

一是:

<button id="prevBtn" onclick="changestate()">prev</button>

单击时，它尝试调用不存在的changestate方法

请删除其中一个并保留一个。

您是否尝试将脚本标记放在

标记之后，并查看其是否有效？

可能是您没有正确引用js路径检查此处如何放置js的相对路径：您已经开始使用稍微复杂的代码学习js，确保从单个任务的简单代码开始。您是否检查了这些变量

carouselslide

和

carouselimage

如果未定义？我刚刚从HTML文件中删除了一个变量，它仍然不适用于方法更改状态一是removed@dachil1pil1除非您没有正确地引用js文件，否则没有其他不工作的原因。你的app.js和你的html文件都在同一个文件夹里？是的，这就是为什么我很困惑的原因。我对所有像这样的小东西都进行了三次检查，并对它们进行了拼写。

不是

@Pablo的有效子代。我不确定您指的是什么，但您可以在html中添加javascript脚本标记。我已更正。不过，我不建议这样做。

<button id="prevBtn" onclick="changestate()">prev</button>

prevBtn.addEventListener('click', () => {
    carouselslide.style.transition = "transform 0.4s ease-in-out";
    counter--;
    carouselslide.stle.transform = 'translateX(' + (-size * counter) + 'px)';
});