Question

我刚开始使用HTML，JS，我正在尝试根据用户的输入切换文本和图像。这个想法是使用用户的答案作为触发事件来更改图像（外部svg文件）和文本（每个注释的开关案例）。那就是我到目前为止：

<!DOCTYPE html>
<html>
<body>

<input id="UserInputText" type="text" value="A">
<input id="UserInputImage" type="image" value="A">

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var text;
var image;
var answers = document.getElementById("myInputText").value;
var answers = document.getElementById("myInputImage").value;

switch(answers) {
case "A":
    text = "NoteA";
    image=<img src="image_library/grandstaff_drawing.svg"></img>;
    break;
case "B":
    text = "NoteB";
    image=<img src="image_library/grandstaff_drawing1.svg"></img>;
    break;
case "C":
    text = "NoteC";
    image=<img src="image_library/grandstaff_drawing2.svg"></img>;
    break;
case "D":
    text = "NoteD";
    image=<img src="image_library/grandstaff_drawing3.svg"></img>;
    break;  
case "E":
    text = "NoteE";
    image=<img src="image_library/grandstaff_drawing4.svg"></img>;
    break;  
case "F":
    text = "NoteF";
    image=<img src="image_library/grandstaff_drawing5.svg"></img>;
    break;  
case "G":
    text = "NoteG";
    image=<img src="image_library/grandstaff_drawing6.svg"></img>;
    break;  
default:
    text = "I have never heard of that note";
}
document.getElementById("demo1").innerHTML = text;
document.getElementById("demo2").innerHTML = image;

</script>

</body>
</html>

谢谢!!!

Answer 1

我已在this fiddle to demo更新了您的代码。看一下它和javascript。如果您想在此处查看代码，请输入以下代码：

HTML

<input id="UserInputImage" type="text" value="A"/>
<div class='button' onclick="change()">click</div>

<div id="demo1"></div>
<div id="demo2"></div>

CSS

.button {
    padding: 5px 10px;
    cursor: pointer;
    display: inline;
}

的javascript

function change() {
var text = "";
var image = "";
//alert('hi');
var answers = document.getElementById("UserInputImage").value;
    //alert(answers);
switch(answers) {
case "A":
    text = "NoteA";
    image='<img src="http://smallbeerpress.com/wp-content/uploads/itunes.png"></img>';
    break;
case "B":
    text = "NoteB";
    image='<img src="http://fc01.deviantart.net/fs29/f/2009/238/d/8/Small_50x50__png_clock_pic_by_counter_countdown_ip.png"></img>';
    break;
case "C":
    text = "NoteC";
    image='<img src="http://a.deviantart.net/avatars/r/a/rachelsrandomart.gif?12"></img>';
    break;

default:
    text = "I have never heard of that note";
}
document.getElementById("demo1").innerHTML = text;
document.getElementById("demo2").innerHTML = image;
}

Answer 2

您需要对代码进行一些更改才能实现您的目标。首先，您不能将相同的var名称分配给两个不同的值，因此，请避免：

var answers = document.getElementById("myInputText").value;
var answers = document.getElementById("myInputImage").value;

接下来，您需要侦听一个事件并将其分配给一个函数，在这种情况下，您要查找的事件称为“更改”，您需要使用事件监听器。

最后，你的所有字符串都需要在引号内，你可以使用这样的单引号：

image="<img src='image_library/grandstaff_drawing4.svg'></img>";

或者，逃避引号，如下：

image="<img src=\"image_library/grandstaff_drawing4.svg\"></img>";

或者更好的是，您只能设置源并将其分配给dom中的img标记。

尝试下一个代码：

<input id="UserInputText" type="text" value="A">
<input id="UserInputImage" type="text" value="A">
<p id="demoText"></p>
<img id="demoImg">
<script>
var text;
var image;
var inputTxt = document.getElementById("UserInputText");
var inputImg = document.getElementById("UserInputImage");

inputTxt.addEventListener('change',changeContent);
inputImg.addEventListener('change', changeContent);

function changeContent() {
    var txtValue = inputTxt.value;
    var imgValue = inputImg.value;
    switch(txtValue){
        //...
        case "C":
            text = "NoteC";
        break;
        //...
    }
    switch(imgValue){
        //...
        case "C":
            image = " http://upload.wikimedia.org/wikipedia/commons/thumb/8/86/TUX-G2-SVG.svg/610px-TUX-G2-SVG.svg";
        break;
        //...
    }
    p = document.getElementById("demoText");
    i = document.getElementById("demoImg");
    p.innerHTML = text;
    i.src = image;
}
</script>

Answer 3

我不是100％肯定你想要完成的事情，但我会从一个人认为你试图切换文字和图像的角度回答根据单击的注释。试试这个： 注意。您需要使用jQuery JavaScript库

HTML：

<html><body><img src="imagesrc.png" id='NoteA'><img src="imagesrc2.png" id='NoteB'><p id='text'>Text goes here</p> <img src="note.svg" id='image'></body></html>

JS：

var text=document.getElementById('text');
var image=document.getElementById('image');
var notes = [document.getElementById('NoteA'), document.getElementById('NoteB')]; // just doing two for simplicity
function switchToNoteInfo(note){
    if (note=='a') {
        $(text).value('Your text for note A');
        $(image).attr('src', 'image_library/grandstaff_drawing6.svg') //or put your own src for note A
    else if (note=='b') {
        $(text).value('Your text for note B');
        $(image).attr('src', 'image_library/grandstaff_drawing6.svg') //or put your own src for note b
    }
}
$(notes[0]).click(function() {switchToNoteInfo('a')});
$(notes[1]).click(function() {switchToNoteInfo('b')});

根据用户的输入切换文本和图像

3 个答案: