javascriptgetelementbyidouterhtml

Javascript Syntax getElementById outerHTML

I have a question concerning the Syntax of outerHTML. It is also possible that I am thinking in the wrong direction.

My html file is as follows:

<!DOCTYPE html>
<html lang="en">
<body>
<label for="language">Choose a language:</label>
<select name="language" id="language" value="val1">
<option value="val1">English</option>
<option value="val2">German</option>
</select>
<p>You selected: <span id="language"></span></p> <!-- shall display either "English" or "German" -->
<p>You selected the following option: <span id="language"></span></p> <!-- shall display either "val1" or "val2" -->
<script  src="./script.js"></script>
</body>
</html>

I am referring to a script where for the moment the only content is

var selectedlang = document.getElementById("language").outerHTML;

Within the html file it shall show the value and variable for it. I don't know how to proceed.

Solution

  • You can't have more than one element in a document with the same id value; your current markup uses id="language" on three different elements. You'll need to change two of them at least.

    I think you're asking how to:

    1. Show the currently-selected option's text and value in the two spans, and

    2. How to update what you show if the user changes the selection.

    If you just wanted the selected value, you could use the value property of the select element. But for both text and value, you'll want the selectedIndex property and the options collection:

    function showTextAndValue(select, textSpan, valueSpan) {
    const option = select.options[select.selectedIndex];
    if (option) {
        textSpan.textContent = option.text;
        valueSpan.textContent = option.value;
    } else {
        // No option is selected
        textSpan.textContent = "";
        valueSpan.textContent = "";
    }
}

    In that example, I've had it accept the select and spans as parameters to the function.

    You'd call that function on page load, and then again whenever the select's input event fired.

    Here's an example:

    const select = document.getElementById("language-select");
const textSpan = document.getElementById("text-span");
const valueSpan = document.getElementById("value-span");

function showTextAndValue(select, textSpan, valueSpan) {
    const option = select.options[select.selectedIndex];
    if (option) {
        textSpan.textContent = option.text;
        valueSpan.textContent = option.value;
    } else {
        // No option is selected
        textSpan.textContent = "";
        valueSpan.textContent = "";
    }
}

// Show on page load
showTextAndValue(select, textSpan, valueSpan);

// Hook the `input` event
select.addEventListener("input", () => {
    // Update the contents of the elements
    showTextAndValue(select, textSpan, valueSpan);
});
    <label for="language">Choose a language:</label>
<select name="language" id="language-select" value="val1">
<option value="val1">English</option>
<option value="val2">German</option>
</select>
<p>You selected: <span id="text-span"></span></p> <!-- shall display either "English" or "German" -->
<p>You selected the following option: <span id="value-span"></span></p> <!-- shall display either "val1" or "val2" -->
<script  src="./script.js"></script>

    (Note that I changed all three ids.)