CodeIgniter Forums
Newbie Seeking JavaScript Help for CodeIgniter 4 - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Newbie Seeking JavaScript Help for CodeIgniter 4 (/showthread.php?tid=91436)



Newbie Seeking JavaScript Help for CodeIgniter 4 - Renta Ardhana - 08-09-2024

PHP Code:
<!DOCTYPE html>
<
html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body style="display:flex;justify-content: center;padding-top: 200px;">
        <div style="width:500px">
            <p style="text-align: center;">Version 1</p>
            <h2 id="showName" style="padding:20px;text-align: center;margin-bottom: 10px;height:30px;"></h2>
            <div style="display:flex;justify-content: center;">
                <input type="text" name="fullname" id="inputFullname"
                style="width:80%;padding:5px;">
            </div>
        </div>
        <div style="width:500px">
            <p style="text-align: center;">Version 2</p>
            <h2 id="showName2" style="padding:20px;text-align: center;margin-bottom: 10px;height:30px"></h2>
            <div style="display:flex;justify-content: center;">
                <input type="text" name="fullname" id="inputFullname2"
                style="width:80%;padding:5px;">
            </div>
        </div>

    </body>
</
html

Sorry for asking this, but I have a bit of a silly question:

I have two versions of a JavaScript snippet: version 1 and version 2. Both produce the same output, as shown in this proof (https://ibb.co.com/Ws1QWrx). What are the advantages and disadvantages of each?

PHP Code:
<script>
    // version 1 <-- using getElementById()
    const theFullname document.getElementById('inputFullname');
    theFullname.addEventListener ('keyup', ()=>{
        const theShowName document.getElementById ('showName');
        theShowName.innerHTML theFullname.value;    
    
})

    // version 2 <-- using element's id directly
    inputFullname2.addEventListener ('keyup',()=>{
        showName2.innerHTML inputFullname2.value;
    })

</
script



RE: Newbie Seeking JavaScript Help for CodeIgniter 4 - InsiteFX - 08-09-2024

Usually newer versions of software are more secure and up to date with current trends!