HTML:对按钮进行编程，使其具有点击功能，并同时使用 getmdl.io

HTML: Program a button to have an onclick, and use getmdl.io at the same time?

本文关键字：功能 io getmdl 按钮 HTML 编程      更新时间：2023-09-26

以下是我的代码：

    <script>
        function changeImage(imgName)
        {
            image = document.getElementById('imgDisp');
            image.src = imgName;
        }
    </script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
</head>
<body>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="button" OnClick="changeImage'https://cdn.pbrd.co/images/1N3JpOlC.png'">Change Image</button>
    <br />
    <img id="imgDisp" src="https://cdn.pbrd.co/images/1N3JpOlC.png" />

</body>
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>

请注意，我是编码新手，所以代码看起来很混乱和错误。无论如何，我希望按钮具有材料代码的样式，即按钮后面的"类"

同样，具有一键式功能来更改图像。我将有一个图像作为开始，每次按下 changeimage 时，它都会按数组的顺序更改为四个图像之一。但下面只是将 changeImage 与材料设计按钮一起使用的测试。

我

不是在寻找它为我完成，而是我应该采取什么方法来自己修复它。比如提示。任何帮助都非常感谢，再次感谢。我的代码不是干净的，我很可能正在犯一些相当令人畏惧的错误。

谢谢。 

<html>
<head>
<script>
        function changeImage()
        {
            image = document.getElementById('imgDisp');
            image.src = 'https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300';
        }
    </script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
</head>
<body>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="button" OnClick="changeImage();">Change Image</button>
    <br />
    <img id="imgDisp" src="https://cdn.pbrd.co/images/1N3JpOlC.png" />
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</body>
</html>

这应该有效。

以下代码适用于您的确切要求。

<!doctype html>
<html lang="en">
<head>
<script>
        function changeImage(imageName)
        {
            image = document.getElementById('imgDisp');
            //image.src = 'https://cdn.pbrd.co/images/1N3JpOlC.png';
            image.src = imageName;
        }
    </script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
</head>
<body>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="button" OnClick='changeImage(&quot;https://cdn.pbrd.co/images/1N3JpOlC.png&quot;);'>Change Image</button>
    <br />
    <img id="imgDisp" src="" />
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</body>
</html>

我从以下链接中得到了提示，因为我知道这是 Javascript 单引号转义的问题。

如何在 JavaScript 中转义单引号 （ ' ）？

尝试这样的想法：

       <img src="someInitUrl" onclick="changeImage(this)"/>
        <script type="text/javascript>
        //array that contains images
        var images[]
        var currentImage=0;
   function changeImage(img){
        img.src=images[currentImage];
        currentImage++;
        if(currentImage==images.length)
            currentImage=0;
        }
}
</script>

您可以使用图像编号 （currentIndex） 切换图像，并将图像作为方法的参数。当然，你应该初始化你的图像数组：

...
images=[];
images.push('http://...1');
images.push('http://...2');
images.push('http://...3');
...
相关文章：