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>
