Javascript - 在选择时更改图像和文本 [英] Javascript - change image and text on select

问题描述

我对 javascript 非常陌生，并且仍在学习.我正在尝试根据用户从下拉列表中的选择更改 div 中的文本和图像.我可以改变图像或改变文本，但不能同时改变两者.如果有人能指出我正确的方向并告诉我我的代码哪里出错了，我将不胜感激.代码如下:

Javascript

function swapImage(){var image = document.getElementById("imageToSwap");var dropd = document.getElementById("swapImg");image.src = dropd.value;var model = document.getElementById("model");var Heading = document.getElementById("heading3");var textGrey = document.getElementById("textGrey");var textGrey2 = document.getElementById("textGrey2");if(dropd.value == "images/1.jpg"){model.innerHTML = "A4";Heading.innerHTML="此文本匹配 A4 型号";textGrey.innerHTML="kjhkjh we ewf kjikjkj we";textGrey2.innerHTML="hf efjkj efe edeeeeeejm dff";返回假；}else if (dropd.value == "images/2.jpg"){model.innerHTML = "A6";Heading.innerHTML ="此文字匹配 A6 型号";textGrey.innerHTML ="xxx xxxxx xxxxx xxxx";textGrey2.innerHTML="yy yyyy yyyy yy";返回假；}else if (dropd.value =="images/3.jpg"){model.innerHTML = "A8";Heading.innerHTML ="此文字符合 A8 型号";textGrey.innerHTML ="zzzz zzzzz";textGrey2.innerHTML="pppp ppp pp p p";返回假；}}

HTML - 用于更改文本和图像的 div

 
<h2 id="model" class="model">A6<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px"/><div id="carbox-bottom"><h3 id="heading3" class="heading3">Loren ipsum dolor sat ame</h3><p id="textGrey" class="textGrey">Coisteahi fwior he qvbsi dolo wetiuyy thuoi loren ipsum dolar </p><p id="textGrey2" class="textGrey2">Coisteahi fwior he qvbsi dolo</p>

<!--结束carbox-->

下拉

解决方案
在你的 
 
 A6<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px"/>
 是 INSIDE 
.因此，当您更改 <h2> 的 innerHTML 时:
var model = document.getElementById("model");model.innerHTML = "A4";
您丢失了 .
修复:让 
 提前结束:
A6
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px"/>
工作示例
Im very new to javascript and still very much learning. I'm trying to change the text and image in a div based on a users selection from a dropdown.
I can get the image to change or the text to change but can not get both to change. If  someone can point me in the right direction and tell me where am I going wrong in my code, it would be greatly appreciated. Code follows:

Javascript
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("swapImg");
    image.src = dropd.value;    


    var model = document.getElementById("model");
    var heading = document.getElementById("heading3");
    var textGrey = document.getElementById("textGrey");
    var textGrey2 = document.getElementById("textGrey2");

    if(dropd.value == "images/1.jpg"){

        model.innerHTML = "A4";
        heading.innerHTML="This text matches A4 model";
        textGrey.innerHTML="kjhkjh we ewf kjikjkj we";
        textGrey2.innerHTML="hf efjkj efe  edeeeeejm dff";
        return false;
    }

    else if (dropd.value == "images/2.jpg"){
        model.innerHTML = "A6";
        heading.innerHTML ="This text matches A6 model"; 
        textGrey.innerHTML ="xxx xxxxx xxxxx xxxx";
        textGrey2.innerHTML="yy yyyy yyyy yy";
        return false;
    }

    else if (dropd.value =="images/3.jpg"){
        model.innerHTML = "A8";
        heading.innerHTML ="This text matches the A8 model"; 
        textGrey.innerHTML ="zzzz zzzzz";
        textGrey2.innerHTML="pppp ppp pp p p";
        return false;
    }
}
HTML - div to change text and image
 <div id="carbox">
   <h2 id="model" class="model">A6
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

    <div id="carbox-bottom">
    <h3 id="heading3" class="heading3">Loren ipsum dolor sit ame</h3>
    <p id="textGrey" class="textGrey">Coisteahi fwior he qvbsi dolo wetiuyy thuoi loren ipsum dolar </p>
    <p id="textGrey2" class="textGrey2">Coisteahi fwior he qvbsi dolo</p> 
    </div>  
    </div>
    <!--End carbox-->
Dropdown
<select id="swapImg" name="model" class="modelSelect" onchange="swapImage()" >
   <option value="images/1.jpg">A4</option>
<option value="images/2.jpg" selected="selected">A6</option>
<option value="images/3.jpg">A8</option>
</select>
解决方案
In your 
 <h2 id="model" class="model">A6
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>
The <img> is INSIDE the <h2>. So when you change the innerHTML of your <h2>:
var model = document.getElementById("model");
model.innerHTML = "A4";
You lose the <img>.

Fix: have the <h2> end earlier:
<h2 id="model" class="model">A6</h2>
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
Working Example

                        
这篇关于Javascript - 在选择时更改图像和文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆