Javascript java脚本：交换技术，添加随机文本_Javascript

Javascript java脚本：交换技术，添加随机文本

javascript

Javascript java脚本：交换技术，添加随机文本,javascript,Javascript,在我的代码中，每当我用鼠标点击一个图像时，它就会切换到另一个图像。我很难将随机文本添加到第二个（交换的）图像中。当我看到第一个图像时，文本不应该出现。这是我的密码。当我试图为随机文本编写代码时，java脚本中有一些错误。请帮我纠正一下 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="css/styles.cs

在我的代码中，每当我用鼠标点击一个图像时，它就会切换到另一个图像。我很难将随机文本添加到第二个（交换的）图像中。当我看到第一个图像时，文本不应该出现。这是我的密码。当我试图为随机文本编写代码时，java脚本中有一些错误。请帮我纠正一下

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <h1></h1>
    <div id="cookie" class='whole'></div>
    </div> 
    <p id="demo"></p>
    <script src="js/cookies.js"></script>
  </body>
</html>

css:

您必须在

fortune

函数中运行

var i=Math.floor（7*Math.random（））

，否则

将与以前一样。

我不确定i=5时会发生什么，因为该数组值没有文本。谢谢！仍然不清楚…我单击鼠标时只看到随机文本，而不是交换的图像和随机文本。在不同元素上有两个不同的单击事件。

var lock = document.getElementById('cookie');
    var state = 'orange';

    function swapImage(){

            if (state === 'orange'){
            lock.className = 'cracked';
            state = 'blue';
        }else{
            lock.className = 'whole';
            state = 'orange';
        }
      }

lock.addEventListener('click', swapImage, false);

var r_text = new Array ();
r_text[0] = "All the leaves are brown";
r_text[1] = "And the sky is grey";
r_text[3] = "On a winter's day";
r_text[4] = "I'd be safe and warm";
r_text[6] = "California dreaming, On such a winter's day";
var i = Math.floor(7*Math.random())

function fortune() {

document.write(r_text[i]);

 }
var elText = document.getElementById('cookies');
elText.addEventListener('click', fortune, false);

  #cookie{
     width: 360px;
     height: 216px;
     margin: 100px auto; 
     margin-top: 10px;
   }

.whole {
    background: url("../images/whole.png");
}
.cracked {
    background: url("../images/cracked.png");
}