Javascript in custom content plugin output

Question

I want to use javascript in my custom Joomla content plugin, but I can't get my custom text when type text in my input by using getElementById.

My code is:

<?php
    $output = '
        <input type="text" id="name" value="default" />
        <button onclick="myAlert();" >test code</button>
        <script>
            var myText = document.getElementById("name").value;
            function myAlert(){
                alert(myText);
            } 
        </script>
        ';
?>

When I click the button only alert default value and not my custom name.

How can I do this?

Answer 1

Check JDocument functions to add scripts to the page output:

• JDocument/addScriptDeclaration
• JDocument/addScript

Answer 2

I found my problem it's simple. I must placed var myText inside the function. now it's work this code work:

<?php
$output = '
    <input type="text" id="name" value="default" />
    <button onclick="myAlert();" >test code</button>
    <script>
        function myAlert(){
            var myText = document.getElementById("name").value;
            alert(myText);
        } 
    </script>
    ';
?>