Is there a way to use document.write() and not overlap everything?

Question

I have this HTML/Javascript code and I want to be able to print the product of a function inside the body of my code. Here is my code:

<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>

The JavaScript I have is this:

< 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>

If you select "Aatrox" it executes the document.write and prints what I want it to. But I don't want to to overwrite everything. What do I use to make my message appear after the "The top champion you selected is" line.

Here is a jsbin of the console: http://jsbin.com/eSiveyU/2/

Thanks

Don't use `document.write()`. Instead, use the DOM. – SLaks Feb 04 '14 at 18:00 — SLaks, Feb 04 '14 at 18:00

score 0 · Answer 1 · answered Feb 04 '14 at 18:05

0

You have to create an additional DOM element and put the result value there. Quick example: http://jsbin.com/OkERuQeJ/1

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

answered Feb 04 '14 at 18:05

Kiril

2,827
1
33
41

Suman Bogati · Answer 2 · 2014-02-04T18:43:29.447

You can store the message 'The top champion you selected is:' in variable once and concate it with selected option and display it in result box. The code would be for this.

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);

Here is the Demo.

score 0 · Answer 3 · edited May 23 '17 at 12:21

Hey FYI your question does not contain all the HTML, making it very confusing. Thankfully the jsbin does.

I don't think document.write() is the right way, because of this:

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

First, you need to wrap "The top champion you selected is:" in a span with an id.

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

If you want to use pure JavaScript, here is what to do:

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

Taken from here: 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>

If you want to use jQuery, it is really easy:

<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>

You seem to be new to HTML/JavaScript, I would definitely recommend learning a library like jQuery. It will make your life much easier.

score 0 · Answer 4 · answered Feb 04 '14 at 18:26

This might help you. http://jsfiddle.net/KPz6X/embedded/result/

I have created a div which will display your result below your button. No need to use document.write(). You can simple use the text() method of jQuery to modify the text of the 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.");
    }
});
});

Is there a way to use document.write() and not overlap everything?

4 Answers4