HTML DOM getElementById()-Node JS

Question

I have this code that adds value to different parts of my html page based on the ID of that element, the code works perfectly no issue but what I'm looking for is a better and efficient solution to replace all the getelementbyid feature, if there is one of course

which mean if there is another methode to reduce the size of the code below and change it with another one

my code is below :

$('#public-event').modal('show');
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '/envoi/update/' + id,
        })
            .done(function (data) {
                var html = ""
                console.log(data);

                for (let i = 0; i < data.length; i++) {
                    if (id === data[i].events._id) {
                        console.log(data[i].events.title)
                        document.getElementById("title").innerHTML = data[i].events.title;
                        document.getElementById("eventDateTime").innerHTML = `${data[i].events.eventDate} at ${data[i].events.targetReminder} | ${data[i].events.targetAmPM}`;
                        document.getElementById("createBy").innerHTML = data[i].events.author;
                        document.getElementById("dateCreation").innerHTML = data[i].events.author;
                        document.getElementById("description").innerHTML = data[i].events.caption;
                        document.getElementById("pubpriv").innerHTML = data[i].events.category;
                        document.getElementById("location").innerHTML = data[i].events.location;
                        $('#monImage').attr('src', 'img/sam.jpg');
                        $('#eventImage').attr('src', 'uploads/' + data[i].events.img);
                        document.getElementById("deleteButtn").setAttribute('data-id', data[i].events._id);
                        document.getElementById("completeButtn").setAttribute('data-id', data[i].events._id);
                        document.getElementById("CommentButtn").setAttribute('data-id', data[i].events._id);
                        document.getElementById("CommentButtn").setAttribute('data-content', data[i].events.author);
                        document.getElementById("likeButton").setAttribute('data-id', data[i].events._id);
                        document.getElementById("likeButton").setAttribute('data-content', data[i].events.author);
                        document.getElementById("showComment").setAttribute('data-id', data[i].events._id);
                        document.getElementById("comment-number").innerHTML = data[i].events.comments.length +' Comments';
                        //to modify imges with dynamic
                    }

Thank you for any suggestion,

Best Regards,

user_2150268 · Answer

Your code comprises of both native JS and jQuery, native being the more verbose. jQuery's own slogan is: "write less, do more" – so that's one note to take away from. But also, some elements require a particular type of formatting, so this shouts for explicit statements. You could also combine the repetitive values into one statement.

$('#title').text(data[i].events.title)
$('#eventDateTime').text(`${data[i].events.eventDate} at ${data[i].events.targetReminder} | ${data[i].events.targetAmPM}`)
$('#createBy, #dateCreation').text(data[i].events.author)
$('#description').text(data[i].events.caption)
$('#pubpriv').text(data[i].events.category)
$('#location').text(data[i].events.location)
$('#monImage').attr('src', 'img/sam.jpg')
$('#eventImage').attr('src', 'uploads/' + data[i].events.img)
$('#deleteButtn, #completeButtn, #CommentButtn, #likeButton, #showComment').attr('data-id', data[i].events._id)
$('#CommentButtn, #likeButton').attr('data-content', data[i].events.author)
$('#comment-number').text(`${data[i].events.comments.length} Comments`)

It's also noteworthy to make use of .text over .html if your values are genuinely just text and do not contain HTML. Otherwise, no harm in replacing with .html.

HTML DOM getElementById()-Node JS

1 Answers