show text from another div to another div

Question

I want to do so after selection the form did't disappear. The text was created in div2. the problem is simplified so I would like a solution on this code.

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

The above code yields ( for me at least ) `Uncaught ReferenceError: show is not defined` — Professor Abronsius, Dec 02 '19 at 15:43
You may wish to read [Why is document.write considered a “bad practice”?](https://stackoverflow.com/q/802854/215552) — Heretic Monkey, Dec 02 '19 at 15:45

score 1 · Answer 1 · answered Dec 02 '19 at 15:47

1

You can append a child node to your "div2" element inside the body of the the "writeVip" or "writeStandard" functinons.

Here is an example on how to achieve that for a list element: https://www.w3schools.com/jsref/met_node_appendchild.asp

answered Dec 02 '19 at 15:47

rolivencia

124
7

score 0 · Accepted Answer · answered Dec 02 '19 at 15:52

If you just want the text to appear below the radio buttons, instead of document.write use innerHTML. So you would need to get the element, and then change it's text based on which radio button is pressed.

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

Professor Abronsius · Answer 3 · 2019-12-02T16:56:49.303

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>

Is this more or less what you are trying to achieve? Using document.write is only really for initial page load and even then it is of limited use much of the time.

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

score 0 · Answer 4 · answered Dec 02 '19 at 16:04

what you probably want to do is this.

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

try to learn some basics of javascript selectors then jquery.

show text from another div to another div

4 Answers4