將文本從另一個 div 顯示到另一個 div

Question

我想在選擇表單后這樣做並沒有消失。 文本是在 div2 中創建的。 問題被簡化了，所以我想要這個代碼的解決方案。

<script>

    function writeStandard() {
        document.write('ticket Standard');
    }
    function writeVip() {
        document.write('ticket Vip');
    }
    function show() {
        document.write('<input type="radio" name="ticket" value="standard" onclick="writeStandard()">Standard');
        document.write('<input type="radio" name="ticket" value="vip" onclick="writeVip()">Vip');
    }

</script>

<body>

    <div id="div1">
        <p>select</p>
        <script>
            show();
        </script>
    </div>

    <div id="div2">
        --- I want here the text after clicking ---
    </div>

</body>

Answer 1

您可以將子節點附加到“writeVip”或“writeStandard”功能主體內的“div2”元素。

以下是如何為列表元素實現這一目標的示例： https : //www.w3schools.com/jsref/met_node_appendchild.asp

Answer 2

如果您只希望文本出現在單選按鈕下方，而不是document.write使用innerHTML 。 因此，您需要獲取元素，然后根據按下的單選按鈕更改其文本。

 <script> function writeStandard() { var temp = document.getElementById("div2"); temp.innerHTML = "ticket Standard"; } function writeVip() { var temp2 = document.getElementById("div2"); temp2.innerHTML = "ticket Vip"; } function show() { document.write('<input type="radio" name="ticket" value="standard" onclick="writeStandard()">Standard'); document.write('<input type="radio" name="ticket" value="vip" onclick="writeVip()">Vip'); } </script> <body> <div id="div1"> <p>select</p> <script> show(); </script> </div> <div id="div2"> </div> </body>

Answer 3

 function show() { let src=document.getElementById('div1'); let tgt=document.getElementById('div2'); ['standard','vip', 'silver', 'gold', 'platinum', 'diamond'].forEach( text=>{ let label=document.createElement('label'); label.innerText=label.for=text; let input=document.createElement('input'); input.type='radio'; input.name='ticket'; input.value=text; label.appendChild( input ); input.addEventListener('click',function(e){ tgt.innerText='ticket '+this.value }); src.appendChild( label ); }); } document.addEventListener( 'DOMContentLoaded', show );

 <div id="div1"> <p>select</p> </div> <div id="div2"></div>

這或多或少是您想要實現的目標嗎？ 使用document.write僅適用於初始頁面加載，即便如此，大部分時間它的用途也是有限的。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script>
            function show() {
                let src=document.getElementById('div1');
                let tgt=document.getElementById('div2');

                ['standard','vip'].forEach( text=>{
                    let label=document.createElement('label');
                        label.innerText=label.for=text;

                    let input=document.createElement('input');
                        input.type='radio';
                        input.name='ticket';
                        input.value=text;

                    label.appendChild( input );

                    input.addEventListener('click',function(e){
                        tgt.innerText='ticket '+this.value
                    });

                    src.appendChild( label );
                });
            }

            document.addEventListener( 'DOMContentLoaded', show );
        </script>
    </head>
    <body>
        <div id="div1">
            <p>select</p>
        </div>

        <div id="div2"></div>
    </body>
</html>

Answer 4

你可能想要做的是這個。

<body>
<div id="div1">
    <p>select</p>
    <input type="radio" name="ticket" value="standard" onclick="writeStandard()"> Standard
    <input type="radio" name="ticket" value="vip" onclick="writeVip()">Vip
</div>
<div id="div2">
    --- I want here the text after clicking ---
</div>
<script>
    var div2=document.getElementById('div2');
    function writeStandard() {
        div2.innerHTML='ticket Standard';
    }
    function writeVip() {
      div2.innerHTML='ticket Vip';
    }
</script>

嘗試學習一些 javascript 選擇器的基礎知識，然后學習 jquery。

將文本從另一個 div 顯示到另一個 div

問題描述

4 個解決方案

解決方案1
1 2019-12-02 15:47:37

解決方案2
0 已采納 2019-12-02 15:52:18

解決方案3
0 2019-12-02 15:56:44

解決方案4
0 2019-12-02 16:04:27

將文本從另一個 div 顯示到另一個 div

問題描述

4 個解決方案

解決方案1 1 2019-12-02 15:47:37

解決方案2 0 已采納 2019-12-02 15:52:18

解決方案3 0 2019-12-02 15:56:44

解決方案4 0 2019-12-02 16:04:27

解決方案1
1 2019-12-02 15:47:37

解決方案2
0 已采納 2019-12-02 15:52:18

解決方案3
0 2019-12-02 15:56:44

解決方案4
0 2019-12-02 16:04:27