获取javascript中单击的源代码？

我正在设计一个使用非常基本的javascript的网页。 代码如下：

html:

重置

下面是javascript：

function display()
{
document.getElementById("description").innerHTML="der Apfel - Apple<br>die Äpfel - Apples<br><br>Ein Apfel am 

Tag hält den Arzt weg<br>- An apple a day keeps the doctor away";
}

function reset()
{
document.getElementById("description").innerHTML="";
}

函数显示（）
{
document.getElementById（“description”）.innerHTML=“der Apfel-Apple
dieÄpfel-Apples
Ein Apfel am
Tag hält den Arzt weg
——每天一个苹果，医生远离你”；
}
函数重置（）
{
document.getElementById（“description”）.innerHTML=“”；
}

单击苹果的图像会在描述框中显示文本。单击菠萝的图像，在同一位置显示一些其他文本

与使用不同的函数（如apple（）、菠萝（））插入文本不同，我认为每当单击某个内容时调用显示函数会更容易，在显示函数中，如果脚本能够识别单击的来源（即单击了哪个图像），它就可以相应地插入文本

---

如何识别单击源呢？

您可以将此

传递给display（）处理程序，然后可以访问接收到单击的DOM元素的属性。这是小提琴：。本质上

<img id="apple" onclick="display(this)" ... >

<img id="pineapple" onclick="display(this)" ... >

<script type="text/javascript">
    function display(self) {
        alert(self.id);
    }
</script>


功能显示（自）{
警报（self.id）；
}
您可以将
此
传递给display（）处理程序，然后可以访问接收单击的DOM元素的属性。这是小提琴：。本质上

<img id="apple" onclick="display(this)" ... >

<img id="pineapple" onclick="display(this)" ... >

<script type="text/javascript">
    function display(self) {
        alert(self.id);
    }
</script>


功能显示（自）{
警报（self.id）；
}
有一个更简单的方法。使用变量：

 function selectFruit(fruit){
     if(fruit == 'apple'){
       .....
     }else if(fruit == 'pinapple'){
       .....
     }
     ...
 }

有一个更简单的方法。使用变量：

 function selectFruit(fruit){
     if(fruit == 'apple'){
       .....
     }else if(fruit == 'pinapple'){
       .....
     }
     ...
 }

简单易用的解决方案：将参数传递给
display
函数：

<img id="apple" onclick="display('apple');" …>
<img id="pineapple" onclick="display('pineapple');" …>

简单易用的解决方案：将参数传递给
display
函数：

<img id="apple" onclick="display('apple');" …>
<img id="pineapple" onclick="display('pineapple');" …>

可能是最简单的方法：

var code, node = document.getElementById('description');

code = {
    apple    : "Apple",
    pineapple: "Pineapple"
};

function display( src ) {

    node.innerHTML = node.innerHTML ? "" : code[ src.id ] ;

}​

for ( var i in code ) {

    document.getElementById( i ).onclick = function() { display( this ) };

}

可能是最简单的方法：

var code, node = document.getElementById('description');

code = {
    apple    : "Apple",
    pineapple: "Pineapple"
};

function display( src ) {

    node.innerHTML = node.innerHTML ? "" : code[ src.id ] ;

}​

for ( var i in code ) {

    document.getElementById( i ).onclick = function() { display( this ) };

}

您可以使用此.id:

<img id="apple" onclick="display(this.id)" src="images/apple.jpg" width="150" height="150">

<img id="pineapple" onclick="display(this.id)" src="images/pineapple.jpg" width="130" height="210">

您可以使用此.id：

<img id="apple" onclick="display(this.id)" src="images/apple.jpg" width="150" height="150">

<img id="pineapple" onclick="display(this.id)" src="images/pineapple.jpg" width="130" height="210">

我会朝着另一个方向走：

对于每个可能的“术语”，都有一个包含所需内容的隐藏文本块
在每个图像标记中，添加其适当占位符的ID作为
rel
属性
让JavaScript在页面加载时运行，自动分配单击事件
示例HTML将是：

<img id="apple" src="images/apple.jpg" rel="desc_Apple" width="150" height="150" />

<img id="pineapple" src="images/pineapple.jpg" rel="desc_Pineapple" width="130" height="210" />

<div class="item_placeholder" id="desc_Apple">
der Apfel - Apple<br>die Äpfel - Apples<br><br>Ein Apfel am 
Tag hält den Arzt weg<br>- An apple a day keeps the doctor away
</div>
<div class="item_placeholder" id="desc_Pineapple">
der Apfel - Pineapple<br>die Äpfel - Pineapples<br><br>Ein Apfel am 
Tag hält den Arzt weg<br>- An Pineapple a day keeps the doctor away
</div>

最后是将他们捆绑在一起的魔力：

window.onload = function() {
    for (var i = 0; i < document.images.length; i++) {
        var image = document.images[i];
        var rel = image.getAttribute("rel");
        if (rel && rel.length > 0) {
            image.onclick = ItemImageClick;
        }
    }
};

function ItemImageClick() {
    var rel = this.getAttribute("rel");
    var placeholder = document.getElementById(rel);
    if (placeholder) {
        document.getElementById("description").innerHTML = placeholder.innerHTML;
    } else {
        alert("DEBUG - element not found " + rel);
    }
}

window.onload=function（）{
对于（var i=0；i0）{
image.onclick=ItemImageClick；
}
}
};
函数ItemImageClick（）{
var rel=this.getAttribute（“rel”）；
var占位符=document.getElementById（rel）；
如果（占位符）{
document.getElementById（“description”）.innerHTML=placeholder.innerHTML；
}否则{
警报（“调试-未找到元素”+rel）；
}
}

.
我会选择另一个方向：

对于每个可能的“术语”，都有一个包含所需内容的隐藏文本块
在每个图像标记中，添加其适当占位符的ID作为
rel
属性
让JavaScript在页面加载时运行，自动分配单击事件
示例HTML将是：

<img id="apple" src="images/apple.jpg" rel="desc_Apple" width="150" height="150" />

<img id="pineapple" src="images/pineapple.jpg" rel="desc_Pineapple" width="130" height="210" />

<div class="item_placeholder" id="desc_Apple">
der Apfel - Apple<br>die Äpfel - Apples<br><br>Ein Apfel am 
Tag hält den Arzt weg<br>- An apple a day keeps the doctor away
</div>
<div class="item_placeholder" id="desc_Pineapple">
der Apfel - Pineapple<br>die Äpfel - Pineapples<br><br>Ein Apfel am 
Tag hält den Arzt weg<br>- An Pineapple a day keeps the doctor away
</div>

最后是将他们捆绑在一起的魔力：

window.onload = function() {
    for (var i = 0; i < document.images.length; i++) {
        var image = document.images[i];
        var rel = image.getAttribute("rel");
        if (rel && rel.length > 0) {
            image.onclick = ItemImageClick;
        }
    }
};

function ItemImageClick() {
    var rel = this.getAttribute("rel");
    var placeholder = document.getElementById(rel);
    if (placeholder) {
        document.getElementById("description").innerHTML = placeholder.innerHTML;
    } else {
        alert("DEBUG - element not found " + rel);
    }
}

window.onload=function（）{
对于（var i=0；i0）{
image.onclick=ItemImageClick；
}
}
};
函数ItemImageClick（）{
var rel=this.getAttribute（“rel”）；
var占位符=document.getElementById（rel）；
如果（占位符）{
document.getElementById（“description”）.innerHTML=placeholder.innerHTML；
}否则{
警报（“调试-未找到元素”+rel）；
}
}

.
我认为OP不需要一个包含大量if-else语句的函数。看看，我不认为OP需要一个包含很多if-else语句的函数。看看