在HTML中使用JavaScript变量

Question

I could not succeed how to use javascript variables in html. 我无法成功使用html中的javascript变量。 At the bottom of the code I wanted to show images with dynnamic paths. 在代码的底部，我想显示带有动态路径的图像。 But it doesnt work. 但它不起作用。 When I write I searched but the answers were not my cure. 当我写文章时，我进行了搜索，但答案并不是我的良方。 Thanks in advance. 提前致谢。

<a href="#"><script type="text/javascript">
document.write('<img src="./images/bird.gif" name="img0" id="img0" onclick="javascript:fnChangeBorder(0);return false;"></a>')</script>

it works but not when i write 它有效但是我写的时候不行

<a href="#"><script type="text/javascript">
document.write('<img src="'+imagelink0+'" name="img0" id="img0" onclick="javascript:fnChangeBorder(0);return false;"></a>')</script>

I am not good at javascript. 我不擅长javascript。 So Can you be a little bit simpler while explaining. 因此，您可以在解释时简化一点吗？ Here is all the code: 这是所有代码：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<body>
<style>
.greenClass {
    border: 3px solid #FFCC66;
    filter: opacity(30%);
}
.redClass {
    border: 3px solid #FF0000;
    filter:opacity(30%);
}

</style>

<!-- What I want to do is play random animal sound and show random 4 animal images. 
The user listens the animal sound and then chooses the correct animal image.
 If the user clicks the  correct image then the border of the image changes to green otherwise to red.
"sample3.mp3" has animal sounds in every 2 seconds.  0-2 seconds has bee sound, 2-4 seconds has dog sound, 4-6 seconds has cat sound ....
imgarr array has animal names the same order with imgSounds.
The problem that when I directly write the image path below, it works but when I write a dynamic path like in the next image below the images are not there.


-->

<audio id="sample" preload controls>
    <source src="sample3.mp3" type="audio/mpeg" />
    Sorry
</audio> 
<button onclick="myFunction()">Click me</button>


<script>
var audio = document.getElementById('sample');  
var segmentEnd;
var imgSounds = [0,2,4,6,8,10];  // Every sound has 2 seconds length (bee sound, dog sound, cat sound ...). In every 2 seconds a different sound starts. All in one mp3 file.
var imgarr = ["bee","dog","cat","donkey","lion","bird"]; // image names are stored in an array.
var shuffledSounds;
var imagelink0; // This is variable keeps the dynamic link path > document.write('<img src="'+imagelink0+'" name="img0" id="img0" onclick="javascript:fnChangeBorder(0);return false;"></a>')  
var imagelink1;
var imagelink2;
var imagelink3;

function myFunction() {
audio.addEventListener('timeupdate', function (){
    if (segmentEnd && audio.currentTime.toFixed() >= segmentEnd) {
        audio.pause();
    }   
}, false);

var shuffledSounds = imgSounds.slice();
shuffle(shuffledSounds);
imagelink0= "./images/"+imgarr[0]+".gif";
imagelink1= "./images/"+imgarr[1]+".gif";
imagelink2= "./images/"+imgarr[2]+".gif";
imagelink3= "./images/"+imgarr[3]+".gif";

 // when shuffled the first item in the array has the random animal sound. 
 // I mean that if   shuffledSounds[0] is 4 then   audio player goes to 4. second and plays the animal sound.
playSegment(shuffledSounds[0]);  

function playSegment(startTime){
    segmentEnd = startTime+2;
    audio.currentTime = startTime;
    audio.play();
}
}




function shuffle(mixArray) {
  var currentIndex = mixArray.length, temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = mixArray[currentIndex];
    mixArray[currentIndex] = mixArray[randomIndex];
    mixArray[randomIndex] = temporaryValue;
  }
  return mixArray;
}



function fnChangeBorder(imgID){ // Change border if correct image is clicked 
if (imgID == 0) {
document.getElementById("img0").className = "greenClass";
}  else {
document.getElementById("img1").className = "redClass";
document.getElementById("img2").className = "redClass";
document.getElementById("img3").className = "redClass";
}

}

</script>

<!--The problem is here. When I directly write the image path below, it works but when I write a dynamic path, the images are not there.
one more thing: how can i show randomly  4 images one of which is the correct one.
-->

<a href="#"><script type="text/javascript">
document.write('<img src="'+imagelink0+'" name="img0" id="img0" onclick="javascript:fnChangeBorder(0);return false;"></a>')</script>
<a href="#"><script type="text/javascript">
document.write('<img src="'+imagelink1+'" name="img1" id="img1" onclick="javascript:fnChangeBorder(1);return false;"></a>')</script>
<a href="#"><script type="text/javascript">
document.write('<img src="'+imagelink2+'" name="img2" id="img2" onclick="javascript:fnChangeBorder(2);return false;"></a>')</script>
<a href="#"><script type="text/javascript">
document.write('<img src="'+imagelink3+'" name="img3" id="img3" onclick="javascript:fnChangeBorder(3);return false;"></a>')</script>

</body></html>

Answer 1

The key to your problem is, when the variables are set to their value and when they are used. 问题的关键是何时将变量设置为其值以及何时使用它们。 Most probably, this order is wrong. 最有可能的是，此顺序是错误的。 A simple solution would be to place the JavaScript code which sets the variables above the document.write lines. 一个简单的解决方案是将JavaScript代码放置在document.write行上方，该变量将设置变量。 However, this only solves part of the problem: the images wouldn't change if you change your variables. 但是，这仅解决了部分问题：如果更改变量，则图像不会更改。

To achieve this, you need to change the src attribute of your <img> Tags every time one of your variables change their value. 为此，您需要在每次变量之一更改其值时更改<img>标记的src属性。

So, instead of using document.write() you should place a static <img> Tag in your html code, give it an id attribute and access it via JavaScript like that: 因此，应该在HTML代码中放置一个静态<img>标记，而不是使用document.write() ，为其提供id属性，并通过JavaScript像这样访问它：

var img = document.getElementById("#img-id");
function changeImgPath(newPath) {
    img.src = newPath;
}

在HTML中使用JavaScript变量

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-09 12:01:01

在HTML中使用JavaScript变量

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-09 12:01:01

解决方案1
0 已采纳 2016-06-09 12:01:01