Javascript - toUpperCase in new window

Question

This is how I want the code to be. When you write any word it will automatically change to uppercase using onkeyup. Also when user clicks on new window, the uppercase letters will be shown in the new window. I can only do the first part. How do I do this? https://jsfiddle.net/p3zea7Lu/11/

<body>
  <div>
    <form>
      <br /><br /> Type in your text: <br />
      <p>
        <input type="text" size="30" id="input" onkeyup="convertToUppercase()" />
      </p>
      <p id="output"></p>
    </form>

    <br />
    <button onclick="myFunction()">Open new window</button>

  </div>
  <script>
    function convertToUppercase() {
      document.getElementById('output').innerHTML = document.getElementById('input').value.toUpperCase();
    }

    function myFunction() {
      var myWindow = window.open("", "MsgWindow", "width=200,height=100");
      myWindow.document.write("The word is:" + input);
    }
  </script>
</body>

Try with this: mywindow.document.write("The word is:" + document.getElementById('input').value.toUpperCase()); — Amit, Sep 04 '19 at 07:55
FAQ: https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows — Holli, Sep 04 '19 at 07:55
@Manish I have rolled back the snippet because `window.open` doesn't work here — adiga, Sep 04 '19 at 08:03

score 1 · Answer 1 · answered Sep 04 '19 at 07:54

1

You can store the input value in a separate variable and then pass it to the document.write

An example fiddle: https://jsfiddle.net/zgbrxk2c/

answered Sep 04 '19 at 07:54

mikheevm

559
5
14

score 1 · Accepted Answer · answered Sep 04 '19 at 07:57

1

Change your myFunction to below.

function myFunction(val) {
        var myWindow = window.open("", "MsgWindow", "width=200,height=100");
        myWindow.document.write("The word is:" + document.getElementById('output').innerHTML);
    }

answered Sep 04 '19 at 07:57

MannersW

93
9

Pushprajsinh Chudasama · Answer 3 · 2019-09-04T08:04:30.657

Here is your updated code.

<html>
<head>
    <meta charset="utf-8" />
    <style>
    </style>

</head>
<body>
    <div>
        <form>
            <br /><br />  Type in your text: <br />
            <p>
                <input type="text" size="30" id="input" onkeyup="convertToUppercase()" />
            </p>
            <p id="output"></p>

        </form><br />
        <button onclick="myFunction()">Open new window</button>

    </div>
    <script>
        function convertToUppercase() {
            document.getElementById('output').innerHTML = document.getElementById('input').value.toUpperCase();

        }
        function myFunction(val) {
            var val = document.getElementById("output").textContent;
            var myWindow = window.open("", "MsgWindow", "width=200,height=100");
            myWindow.document.write("The word is:" + val);
        }
    </script>
</body>

</html>

score 1 · Answer 4 · answered Sep 04 '19 at 07:58

1

<button onclick="myFunction(document.getElementById('output').innerHTML)">
    Open new window
</button>

function myFunction(val) {
    var myWindow = window.open("", "MsgWindow", "width=200,height=100");
    myWindow.document.write("The word is:" + val);
}

Hope this helps you.

answered Sep 04 '19 at 07:58

It worked as it is. The onclick attribute does the job. – Sep 04 '19 at 08:00

score 1 · Answer 5 · answered Sep 04 '19 at 08:14

 function myFunction(val) {
            var myWindow = window.open("", "MsgWindow", "width=200,height=100");
            myWindow.document.write("The word is:" +  document.getElementById('output').innerHTML);
        }

// Just replaced input with document.getElementById('output').innerHTML

score 0 · Answer 6 · answered Sep 04 '19 at 08:04

0

Are popups enabled on that PC's Chrome? If they're not then the new window cannot be created hence win is undefined

answered Sep 04 '19 at 08:04

Nijin P J

1,302
1
9
15

Javascript - toUpperCase in new window

6 Answers6