第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Javascript 語法 getElementById outerHTML

Javascript 語法 getElementById outerHTML

收到一只叮咚 2023-06-15 17:32:05
我有一個關(guān)于 outerHTML 語法的問題。也有可能我的思路錯了。我的html文件如下：<!DOCTYPE html><html><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>我指的是一個腳本，目前唯一的內(nèi)容是var selectedlang = document.getElementById("language").outerHTML;在 html 文件中，它應(yīng)顯示它的值和變量。我不知道如何進行。
查看完整描述

1 回答

?
慕容森

TA貢獻1853條經(jīng)驗 獲得超18個贊

一個文檔中不能有多個具有相同id值的元素；您當前的標記使用id="language"三個不同的元素。您至少需要更改其中兩個。

我想你問的是如何：

  1. 在兩個 s 中顯示當前選擇的選項的文本和值span，以及

  2. 如果用戶更改選擇，如何更新您顯示的內(nèi)容。

如果您只想要選定的值，則可以使用元素value的屬性select。但是對于文本和值，您需要selectedIndex屬性和options集合：

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 = "";

    }

}

在那個例子中，我讓它接受了select和spans 作為函數(shù)的參數(shù)。

您將在頁面加載時調(diào)用該函數(shù)，然后在 的事件觸發(fā)時再次select調(diào)用input。

這是一個例子：

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>

（請注意，我更改了所有三個id。）



查看完整回答
反對 回復(fù) 2023-06-15
  • 1 回答
  • 0 關(guān)注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號