Question

我无法成功如何在html中使用javascript变量。在代码的底部，我想用动态路径显示图像。但它不起作用。当我写作我搜索但答案不是我的治疗方法。提前谢谢。

<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>

它有效但不是我写的时候

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

我不擅长javascript。所以你在解释时能不能简单一些。以下是所有代码：

<!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

问题的关键是，当变量设置为它们的值以及何时使用它们。最有可能的是，这个顺序是错误的。一个简单的解决方案是放置将代码设置在document.write行之上的JavaScript代码。但是，这只能解决部分问题：如果更改变量，图像就不会改变。

为实现此目的，每当您的某个变量更改其值时，您需要更改src标签的<img>属性。

因此，您应该在html代码中放置一个静态document.write()标记，而不是使用<img>标记，为其提供id属性并通过JavaScript访问它：

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

在html中使用javascript变量

1 个答案: