Question

当我单击带有JavaScript代码的按钮时，我希望能够使“ HERE”一词随机更改其位置。我已经在同一个文件中有了另一个javascript代码，但是换了一个词（“ BECOME”），它就可以了。但是看来，当我将这两个代码放在同一个javascript文件中时，“ HERE”一词由于某种原因停止工作，我无法弄清楚。我仍然是JavaScript的新手，因此遇到了麻烦...非常感谢您的帮助！

HTML：

<link rel="stylesheet" href="css_become.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>

<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>

</header>


<h1 class="here">Here!</h1>


<h2 id="button">reposition me!</h2>
<!--HERE-->

<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>

<div id="float">

<div class="dot">
<h4 id="become_original">Become</h4>
</div>

</div>

<h2 id="button1">Transform me!</h2>
<!--BECOME-->

<script src="javascript_become.js" type="application/javascript"> </script>

</body>
</html>

CSS：

@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}

@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}

@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}

@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}

@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}

@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}

body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}

h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}

/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}

#button:hover {text-decoration: underline;}


.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}

/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}

.class2 {
 font-weight: Regular;
 font-family: BAUHS93;
 }

.class3 {
font-family: bb-book;
}

.class4 {
font-family: bebas;
font-style:oblique;
}

.class5 {
font-family: mod;
text-transform: uppercase;
}

.class6 {
font-family: monotonia;
}


/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}

#container {
margin: 15% 0 6% 0;
}

#become_original {
font-size: 100px;
margin: 0 auto;
}

#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}

#button1:hover {text-decoration: underline;}

span{color: #FFF;}

/*animations*/

@keyframes cores {
0%   {background-color: #F5CDFF;}
25%   {background-color:#00ADEF;}
50%  {background-color: #EE3E4E;}
100%  {background-color:#F5CDFF;}
 }

@keyframes floating {
from { transform: translate(0,  0px); }
65%  { transform: translate(0, 15px); }
to   { transform: translate(0, 0px); }
}

JAVASCRIPT：

//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE

const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];

var button1;
var selectedIndex = 0;

document.getElementById("button1").addEventListener("click", function(){

if(++selectedIndex >= classes.length) selectedIndex = 0;

document.getElementById("become_original").className = classes[selectedIndex];

});

//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING

$(document).ready(function(){
var button;
button = document.getElementById('button');

$('button').click(function(){
$('.here').css({
top: (100 * Math.random()).toString() + "%",
left: (100 * Math.random()).toString() + "%",
})
})
});

Answer 1

好的，更正了几件事，首先您使用的是Vanilla Javascript和jQuery。转换后的代码现在可以运行普通的Vanilla。

现在，您的javascript会在页面加载时运行。

在CSS中，我们还需要使.here具有position: absolute，否则您的top和left命令无效。请记住，Math.random()的值介于0到1之间，因此移动并不剧烈:)但我认为您可以自己进行调整。您还需要调整绝对位置以使其看起来正确。

//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE

const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];

var button1;
var selectedIndex = 0;

document.addEventListener('DOMContentLoaded', function() {

  // Set up click event for the 'become'
  document.getElementById("button1").addEventListener("click", function() {
    if (++selectedIndex >= classes.length) selectedIndex = 0;
    document.getElementById("become_original").className = classes[selectedIndex];
  });
  
  // Set up HERE
  document.getElementById('button').addEventListener('click', function() {
    let here = document.querySelector('.here');
    here.style.top = `${Math.random()}%`;
    here.style.left = `${Math.random()}%`;
    console.log('Moved here');
  });


});

  @font-face {
  font-family: BAUHS93;
  src: url(fontes/BAUHS93.TTF);
}

@font-face {
  font-family: Amatic;
  src: url(fontes/AmaticSC-Regular.ttf);
}

@font-face {
  font-family: bb-book;
  src: url(fontes/bb-book.otf);
}

@font-face {
  font-family: bebas;
  src: url(fontes/BEBAS__.TTF);
}

@font-face {
  font-family: mod;
  src: url(fontes/MOD20.TTF);
}

@font-face {
  font-family: monotonia;
  src: url(fontes/monotonia.otf);
}

body {
  margin: 0;
  padding: 0;
  border: solid 10px #000;
  background-color: #EE3E4E;
  border: solid 10px #000;
}

h1,
h2,
h4,
h5,
p,
button {
  font-family: Helvetica;
  font-weight: bold;
  text-transform: uppercase;
  color: #000;
  font-size: 35px;
  line-height: 38px;
}


/*here's button*/

#button {
  width: 295px;
  margin: auto;
  margin-top: 2.5%;
  border: 0px;
  background-color: inherit;
}

#button:hover {
  text-decoration: underline;
}

.here {
  color: #FFF;
  text-align: center;
  width: 500px;
  margin: auto;
  margin-top: 7.5%;
  position: absolute;
}


/* for become */

.class1 {
  font-family: Amatic;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: 25px;
}

.class2 {
  font-weight: Regular;
  font-family: BAUHS93;
}

.class3 {
  font-family: bb-book;
}

.class4 {
  font-family: bebas;
  font-style: oblique;
}

.class5 {
  font-family: mod;
  text-transform: uppercase;
}

.class6 {
  font-family: monotonia;
}


/*circle*/

.dot {
  height: 465px;
  width: 465px;
  border-radius: 100%;
  margin: 0 auto;
  background-color: #F5CDFF;
  animation-name: cores;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  display: flex;
  align-items: center;
  margin-top: -5%;
  overflow: hidden;
}

#container {
  margin: 15% 0 6% 0;
}

#become_original {
  font-size: 100px;
  margin: 0 auto;
}

#float {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}


/*become's button*/

#button1 {
  background-color: inherit;
  width: 300px;
  margin: auto;
  margin-top: 2.5%;
  margin-bottom: 2.5%;
}

#button1:hover {
  text-decoration: underline;
}

span {
  color: #FFF;
}


/*animations*/

@keyframes cores {
  0% {
    background-color: #F5CDFF;
  }
  25% {
    background-color: #00ADEF;
  }
  50% {
    background-color: #EE3E4E;
  }
  100% {
    background-color: #F5CDFF;
  }
}

@keyframes floating {
  from {
    transform: translate(0, 0px);
  }
  65% {
    transform: translate(0, 15px);
  }
  to {
    transform: translate(0, 0px);
  }

<!--HERE-->
<header>

  <h4>Here is everyw<span>here</span></h4>
  <h5>(it depends where you are)</h5>

</header>


<h1 class="here">Here!</h1>


<h2 id="button">reposition me!</h2>
<!--HERE-->

<!--BECOME-->
<div id="container">
  <p><span>Become</span>
    <br>to come into existence
    <br>to come to be
    <br>to undergo <span>change</span>
  </p>
</div>

<div id="float">

  <div class="dot">
    <h4 id="become_original">Become</h4>
  </div>

</div>

<h2 id="button1">Transform me!</h2>

Answer 2

您的第一个问题是，您正在尝试为元素按钮设置点击侦听器，但这不是您要在此处传递的内容：

var button;
button = document.getElementById('button');

$('button').click(function(){

它实际上应该是：

$('#button').click(function(){

因为您已经在使用jQuery，所以不需要通过id为按钮创建变量，所以只需使用ID。

接下来，要使其移动，为什么不使用jQuerys offset函数？

$('#button').click(function(){
    $('.here').offset({
        top: 100 * Math.random(),
        left: 100 * Math.random(),
    })
});

这还将设置您的顶部和左侧偏移量。

工作解决方案：

//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE

const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];

var button1;
var selectedIndex = 0;

document.getElementById("button1").addEventListener("click", function(){

if(++selectedIndex >= classes.length) selectedIndex = 0;

document.getElementById("become_original").className = classes[selectedIndex];

});

//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING

$(document).ready(function(){

  //UPDATED THIS TO USE #
  $('#button').click(function(){
    $('.here').offset({
      top: 100 * Math.random(),
      left: 100 * Math.random(),
    })
  });
});

@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}

@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}

@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}

@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}

@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}

@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}

body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}

h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}

/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}

#button:hover {text-decoration: underline;}


.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}

/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}

.class2 {
 font-weight: Regular;
 font-family: BAUHS93;
 }

.class3 {
font-family: bb-book;
}

.class4 {
font-family: bebas;
font-style:oblique;
}

.class5 {
font-family: mod;
text-transform: uppercase;
}

.class6 {
font-family: monotonia;
}


/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}

#container {
margin: 15% 0 6% 0;
}

#become_original {
font-size: 100px;
margin: 0 auto;
}

#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}

#button1:hover {text-decoration: underline;}

span{color: #FFF;}

/*animations*/

@keyframes cores {
0%   {background-color: #F5CDFF;}
25%   {background-color:#00ADEF;}
50%  {background-color: #EE3E4E;}
100%  {background-color:#F5CDFF;}
 }

@keyframes floating {
from { transform: translate(0,  0px); }
65%  { transform: translate(0, 15px); }
to   { transform: translate(0, 0px); }
}

<link rel="stylesheet" href="css_become.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>

<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>

</header>


<h1 class="here">Here!</h1>


<h2 id="button">reposition me!</h2>
<!--HERE-->

<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>

<div id="float">

<div class="dot">
<h4 id="become_original">Become</h4>
</div>

</div>

<h2 id="button1">Transform me!</h2>
<!--BECOME-->

<script src="javascript_become.js" type="application/javascript"> </script>

</body>
</html>

如何使用javascript单击鼠标使单词随机改变位置？

2 个答案: