Question

我有这个HTML / Javascript代码，我希望能够在我的代码体内打印函数的产品。这是我的代码：

<form>
    <div class="answer1wrap">
        <label>Select your top champion:</label>
        <select id="topSelect">
            <option value="void">Select a champion</option>
            <option value="aatrox">Aatrox</option>
            <option value="ahri">Ahri</option>
            <option value="akali">Akali</option>
        </select>
    </div>
</form>

<button class="btn btn-default" id="checkbtn" onclick="topAnswer();" type="button"><span    class="glyphicon glyphicon-check"></span> Calculate Win Chance</button>

我拥有的JavaScript是：

< script >
    function topAnswer() {

    var element = document.getElementById("topSelect");
    var elementValue = element.value;

    if (elementValue == "aatrox") {
        document.write("You selected Aatrox for your teams top lane champion");
    }
}
< /script>

如果选择“Aatrox”，它会执行document.write并打印我想要的内容。但我不想覆盖一切。在“您选择的最佳冠军”行之后，我用什么来显示我的消息。

以下是控制台的jsbin：http://jsbin.com/eSiveyU/2/

由于

Answer 1

您必须创建一个额外的DOM元素并将结果值放在那里。快速示例：http://jsbin.com/OkERuQeJ/1

document.getElementById("selectionResult").innerHTML = elementValue;

Answer 2

您可以存储消息'您选择的最高冠军是：'变量一次，并将其与选定的选项连接并显示在结果框中。代码就是为了这个。

function topAnswer(){
    var element = document.getElementById("topSelect");
    var elementValue = element.value;
    if(elementValue == "aatrox"){

    var div = document.getElementsByClassName('display')[0];
    var ptag = div.getElementsByTagName('p')[0];
        if(typeof greeting == 'undefined'){
            greeting = ptag.innerHTML;
        }
        ptag.innerHTML = greeting + elementValue;

    }
}

document.getElementById('checkbtn').addEventListener('click', topAnswer);

以下是Demo.

Answer 3

嘿FYI您的问题不包含所有HTML，使其非常混乱。谢天谢地，jsbin做了。

我不认为document.write（）是正确的方法，因为：

Why is document.write considered a "bad practice"?

首先，你需要在一个带有id的范围中包装“你选择的最高冠军是：”。

<span id='bottomText'>The top champion you selected is:</span>

如果您想使用纯JavaScript，请执行以下操作：

http://jsbin.com/EzUNuTUy/1/edit

从这里采取：How to do insert After() in JavaScript without using a library?

<script>
//This function will insert a node after an element
function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function topAnswer(){
    var element = document.getElementById("topSelect");
    var elementValue = element.value;
    if(elementValue == "aatrox"){
        var el = document.createElement("span");
        el.innerHTML = "You selected Aatrox for your teams top lane champion.";
        var div = document.getElementById("bottomText");
        insertAfter(div, el); 
    }
}
</script>

如果你想使用jQuery，那真的很容易：

<script>
function topAnswer(){
   var element = document.getElementById("topSelect");
   var elementValue = element.value;
   if(elementValue == "aatrox"){
       $("You selected Aatrox for your teams top lane champion.").insertAfter($("#bottomText")); 
    }
}
</script>

您似乎是HTML / JavaScript的新手，我肯定会建议您学习像jQuery这样的库。它会让你的生活更轻松。

Answer 4

这可能会对你有所帮助。 http://jsfiddle.net/KPz6X/embedded/result/

我创建了一个div，它会在按钮下方显示结果。无需使用document.write（）。您可以简单地使用jQuery的text（）方法来修改div的文本。

HTML

<form>
    <div class="answer1wrap">
        <label>Select your top champion:</label>
        <select id="topSelect">
            <option value="void">Select a champion</option>
            <option value="aatrox">Aatrox</option>
            <option value="ahri">Ahri</option>
            <option value="akali">Akali</option>
        </select>
    </div>
</form>
<button class="btn btn-default" id="checkbtn" type="button"><span class="glyphicon glyphicon-check"></span> Calculate Win Chance</button>
<div class="display">
    <p>The top champion you selected is: </p>
</div>

的jQuery

$(document).ready(function(){
$(".btn-default").on('click', function () {
    if ($("#topSelect").val() == "aatrox") {
        $(".display p").text("You selected Aatrox for your teams top lane champion.");
    }
});
});

有没有办法使用document.write（）而不重叠所有内容？

4 个答案: