尝试制作一个按钮，将您带到Google页面

Question

我有一个带按钮和onclick函数脚本的html脚本，应该将我带到google.com，但似乎不起作用。 坚持了几个小时。 我对HTML也很陌生。

尝试了一切。 第336和353行应为必需的内容。 136行应该是按钮本身。 我不明白怎么了 有人遇到过这个问题吗？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon/text/javascript" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>SpyBanter - SpyBanter's Official WebSite</title>
<style type="text/css">
      body {
  overflow: hidden;
  margin: 0;
}
body:before {
  content: '';
  background: #c4252a url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/cheap_diagonal_fabric.png);
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

canvas {
  opacity: 0;
  transition: 1s opacity cubic-bezier(0.55, 0, 0.1, 1);
}
canvas.ready {
  opacity: 0.4;
}

.intro {
  position: absolute;
  padding: 20px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  text-align: center;
  color: #fafafa;
  z-index: 10;
  width: 100%;
  max-width: 700px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-shadow: 0px 5px 20px black;
}
.intro h1 {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 2px;
}
.intro p {
  letter-spacing: 1px;
  line-height: 24px;
}
#btnclose {
                background-color: indianred;
                border-color: darkred;
            }

            }
            #btnnup:hover, #btnsisu:hover, #btncmd:hover {
              background-color: #3e8e41;
            }
            #btnnup:active, #btnsisu:active, #btncmd:active {
              background-color: #3e8e41;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
            }
            #btnsisu {
              left: 108px;
              top: 105px;
            }
            #btncmd {
              left: -311px;
              top: -88px;
            }
            #content {
              width: 100%;
              height: auto;
              min-height: 580px;
            }

    </style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<canvas id="canvas" data-image="http://unsplash.it/g/450/200/?random=1"></canvas>
<div class="intro">
<h1>Interactive mosaic background</h1>
<p>Had to do this effect in a recent project and wanted to share it with you :). To change the background, edit the data-image on the canvas tag. You can also change the magnet effect intensity by changing the magnet variable</p>
<button id="btncmd">Videos</button>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script type="application/javascript">
      (function () {
  // Variables
  var Photo, addListeners, canvas, createGrid, ctx, gridItem, grids, height, img, imgInfo, imgSrc, imgs, init, magnet, mouse, populateCanvas, render, resizeCanvas, rotateAndPaintImage, updateMouse, useGrid, width;

  canvas = document.getElementById('canvas');

  ctx = canvas.getContext('2d');

  width = canvas.width = window.innerWidth;

  height = canvas.height = window.innerHeight;

  imgSrc = canvas.dataset.image;

  img = new Image();

  useGrid = true;

  imgInfo = {};

  imgs = [];

  grids = [];

  magnet = 2000;

  mouse = {
    x: 1,
    y: 0 };


  init = function () {
    addListeners();
    img.onload = function (e) {
      var numberToShow;
      // Check for firefox. 
      imgInfo.width = e.path ? e.path[0].width : e.target.width;
      imgInfo.height = e.path ? e.path[0].height : e.target.height;
      numberToShow = Math.ceil(window.innerWidth / imgInfo.width) * Math.ceil(window.innerHeight / imgInfo.height);
      if (useGrid) {
        createGrid();
      }
      populateCanvas(numberToShow * 4);
      canvas.classList.add('ready');
      return render();
    };
    return img.src = imgSrc;
  };

  addListeners = function () {
    window.addEventListener('resize', resizeCanvas);
    window.addEventListener('mousemove', updateMouse);
    return window.addEventListener('touchmove', updateMouse);
  };

  updateMouse = function (e) {
    mouse.x = e.clientX;
    return mouse.y = e.clientY;
  };

  resizeCanvas = function () {
    width = canvas.width = window.innerWidth;
    return height = canvas.height = window.innerHeight;
  };

  populateCanvas = function (nb) {
    var i, p, results;
    i = 0;
    results = [];
    while (i <= nb) {
      p = new Photo();
      imgs.push(p);
      results.push(i++);
    }
    return results;
  };

  createGrid = function () {
    var c, grid, i, imgScale, item, j, k, l, r, ref, ref1, ref2, results, x, y;
    imgScale = 0.5;
    grid = {
      row: Math.ceil(window.innerWidth / (imgInfo.width * imgScale)),
      cols: Math.ceil(window.innerHeight / (imgInfo.height * imgScale)),
      rowWidth: imgInfo.width * imgScale,
      colHeight: imgInfo.height * imgScale };

    for (r = j = 0, ref = grid.row; 0 <= ref ? j < ref : j > ref; r = 0 <= ref ? ++j : --j) {
      x = r * grid.rowWidth;
      for (c = k = 0, ref1 = grid.cols; 0 <= ref1 ? k < ref1 : k > ref1; c = 0 <= ref1 ? ++k : --k) {
        y = c * grid.colHeight;
        item = new gridItem(x, y, grid.rowWidth, grid.colHeight);
        grids.push(item);
      }
    }
    results = [];
    for (i = l = 0, ref2 = grids.length; 0 <= ref2 ? l < ref2 : l > ref2; i = 0 <= ref2 ? ++l : --l) {
      results.push(grids[i].draw());
    }
    return results;
  };

  gridItem = function (x = 0, y = 0, w, h) {
    this.draw = function () {
      ctx.drawImage(img, x, y, w, h);
    };
  };

  Photo = function () {
    var TO_RADIANS, finalX, finalY, forceX, forceY, h, r, seed, w, x, y;
    seed = Math.random() * (2.5 - 0.7) + 0.7;
    w = imgInfo.width / seed;
    h = imgInfo.height / seed;
    x = window.innerWidth * Math.random();
    finalX = x;
    y = window.innerHeight * Math.random();
    finalY = y;
    console.log(`INIT Y :: ${finalY} || INIT X :: ${finalX}`);
    r = Math.random() * (180 - -180) + -180;
    forceX = 0;
    forceY = 0;
    TO_RADIANS = Math.PI / 180;
    this.update = function () {
      var distance, dx, dy, powerX, powerY, x0, x1, y0, y1;
      x0 = x;
      y0 = y;
      x1 = mouse.x;
      y1 = mouse.y;
      dx = x1 - x0;
      dy = y1 - y0;
      distance = Math.sqrt(dx * dx + dy * dy);
      powerX = x0 - dx / distance * magnet / distance;
      powerY = y0 - dy / distance * magnet / distance;
      forceX = (forceX + (finalX - x0) / 2) / 2.1;
      forceY = (forceY + (finalY - y0) / 2) / 2.2;
      x = powerX + forceX;
      y = powerY + forceY;
    };
    this.draw = function () {
      return rotateAndPaintImage(ctx, img, r * TO_RADIANS, x, y, w / 2, h / 2, w, h);
    };
  };

  rotateAndPaintImage = function (context, image, angle, positionX, positionY, axisX, axisY, widthX, widthY) {
    context.translate(positionX, positionY);
    context.rotate(angle);
    context.drawImage(image, -axisX, -axisY, widthX, widthY);
    context.rotate(-angle);
    return context.translate(-positionX, -positionY);
  };

  render = function () {
    var x, y;
    x = 0;
    y = 0;
    ctx.clearRect(0, 0, width, height);
    while (y < grids.length) {
      grids[y].draw();
      y++;
    }
    while (x < imgs.length) {
      imgs[x].update();
      imgs[x].draw();
      x++;
    }
    return requestAnimationFrame(render);
  };

  init();

}).call(this);


  cmd = function () {
    window.location.href = "https://www.google.com/";           
  }
  function cmd() {
    window.location.href = "https://www.google.com/";               
  }
    btnclose.onclick = cmd;
    btnnup.onclick = cmd;
    btncmd.onclick = cmd;
//# sourceURL=coffeescript
      //# sourceURL=pen.js
    </script>
        <script type="application/javascript">
            window.onload = function() {
                main.style.opacity = "1";   
            }
            function show(){
                main.style.opacity = "1";   
            }
            function close() {
                main.style.opacity = "0";   
                $.post('http://tt_help/close', JSON.stringify({
                }));
            }
            function cmd() {
                window.location.href = "https://www.google.com/";               
            }
            function sisukord() {
              let id = $(this).attr('content');
              console.log(id)
              let docs = `https://docs.google.com/document/d/e/2PACX-1vSXxzowHucTNRBwduXT-pDoGQT4blGJhOvgnzIYmpEe2DwU4mimf84RZ8orvUGpm2vPsPDdkkVAnFkq/pub?embedded=true${id}`;

              $('#main iframe').attr('src', docs);

            }
            window.addEventListener('message', function(event) {
                if (event.data.type == "open") {
                    main.style.opacity = "1";                   
                }
            });
            btnclose.onclick = cmd;
            btncmd.onclick = cmd;
            btnsisu.onclick = cmd;
        </script>
</body>

Answer 1

如果您要制作一个将您带到google.com的按钮，我建议您使用一个标签，而不是按钮标签。 单击后，标签会自动将您链接到所需的目的地。

例：

 <a href="https://www.example.com/"> Example </a> 

如果您希望链接看起来像一个按钮，则只需查看css选项。 我建议您在这里查看： https : //www.w3schools.com/css/css_link.asp

 a { background-image:linear-gradient(to bottom, lightblue, aquamarine); padding:5px; text-decoration:none; color:black; padding-right:50px; padding-left:50px; margin-top: 50px; margin-left: 50px; display: inline-block; font-size:25px; border-radius:5px; box-shadow: 1px 1px green; } 

 <a href="https://www.example.com"> Example </a> 

如果确定要使用<button>标签，则只需在该button标签内添加onclick属性即可。 因此，您可以将代码更改为<button id="btncmd" onclick="cmd()">Videos</button> 。

您想要的示例：

 function cmd() { window.location.href = "https://www.example.com/"; // I'm using example but you can use google. } 

 <button id="btncmd" onclick="cmd()">Videos</button> 

Answer 2

您没有定义btncmd 。 将此行添加到您的代码中可以解决此问题：

var btncmd = document.getElementById("btncmd");