Question

我正在为我的大学开展一个项目，但我似乎无法正常工作。我在html中编写了一个按钮，并在javascript中编写了该函数。点击时我的按钮似乎没有调用该程序，我插入一个警报只是为了确保这一点。当我注释掉我的代码时，警报弹出就好了，但是一旦我取消注释我的代码块按钮似乎根本不起作用，事实上当我取消注释代码时，我的整个javascript似乎失败，因为另一个按钮我写道也不会工作。任何想法为什么会这样，或者我做错了什么？

代码HTML：

<Div Align="Center" id="Next">
  <Br>
  <Br>
  <Br>
  <Br>
  <Br>
  <Br>
  <Br>
  <Br>
  <Br>
  <Br>

  <Input Type="Button" Value="Next" onClick="Next()">
</Div>

代码Javascript：

function Next(){
  alert('P');

  Image = Image++;
  If (Image = 1){
    document.getElementsByClassName(Images).setAttribute('src', '\Christopher_Thesner_HTML_Formative_1\Img\Img1.jpg');
  } else if {
    (Image = 2){
    document.getElementsByClassName(Images).setAttribute('src', '\Christopher_Thesner_HTML_Formative_1\Img\Img2.jpg');
  }} else if {
    (Image = 3){
    document.getElementsByClassName('Images').setAttribute('src', '\Christopher_Thesner_HTML_Formative_1\Img\Img3.JPEG');
  }} else if {
    (Image = 4){
    document.getElementsByClassName('Images').setAttribute('src', '\Christopher_Thesner_HTML_Formative_1\Img\Img4.png');
  }} else if {
    (Image = 5){
    document.getElementsByClassName('Images').setAttribute('src', '\Christopher_Thesner_HTML_Formative_1\Img\Img5.jpg');
  }} else if {
    (Image = 6){
    document.getElementsByClassName('Images').setAttribute('src', '\Christopher_Thesner_HTML_Formative_1\Img\Img6.jpg');
  }} else if {
    (Image = 7){
    document.getElementsByClassName('Images').setAttribute('src', '\Christopher_Thesner_HTML_Formative_1\Img\Img7.jpg');
  }} else if {
    (Image = 8){
    document.getElementsByClassName('Images').setAttribute('src', '\Christopher_Thesner_HTML_Formative_1\Img\Img8.jpg');
  }} else if {
    (Image = 9){
    document.getElementsByClassName('Images').setAttribute('src', '\Christopher_Thesner_HTML_Formative_1\Img\Img9.jpg');
}}}

任何帮助将不胜感激。提前谢谢。

Answer 1

首先，你总是分配，而不是比较

if (Image = 1)

指定 -

if (Image == 1)

会比较。

其次，整个事情可以改写为

function Next(){
    Image = Image++;
    document.getElementById('Image').setAttribute('src', '\Christopher_Thesner_HTML_Formative_1\Img\Img' + Image + '.jpg');
}

因为您只是将图像src设置为Image变量所持有的任何数字。

同时更改您的html以使用ID作为图片。

<img src="" id="Image">

Answer 2

试试这个：

var Img=0;
function Next(){
    Img = Img+1;
    document.getElementById("Image").src = "http://dummyimage.com/600x400/000/fff&text=Image"+Img;
}

<button onClick="Next()">Change Image</button>
<img id="Image">

用html代码编写的按钮在点击

2 个答案: