Replace text and numbers with images using Javascript

Question

Replace text and numbers with images using Javascript

Just dipping my toes into the world of JavaScript and working on a fun little project - a binary clock (yes, I know, super geeky)

I've managed to write most of the code, but now I want to take it to the next level. Currently, the numbers are being displayed as strings of 0s and 1s, but I'd really like them to show as images instead: 0.png and 1.png, which are saved in the same directory...

Here's what I have so far. Ideally, I'd love for these changes to happen within the same function...

function binClock ()
{
    var currentTime = new Date();

    var currentYear = currentTime.getFullYear();
    var currentMonth = currentTime.getMonth() + 1;
    var currentDate = currentTime.getDate();
    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();

    currentYear = currentYear.toString(2);
    currentMonth = currentMonth.toString(2);
    currentDate = currentDate.toString(2);
    currentHours = currentHours.toString(2);
    currentMinutes = currentMinutes.toString(2);
    currentSeconds = currentSeconds.toString(2);

    document.getElementById("year").firstChild.nodeValue = currentYear;
    document.getElementById("month").firstChild.nodeValue = currentMonth;
    document.getElementById("date").firstChild.nodeValue = currentDate;
    document.getElementById("hour").firstChild.nodeValue = currentHours;
    document.getElementById("min").firstChild.nodeValue = currentMinutes;
    document.getElementById("second").firstChild.nodeValue = currentSeconds;
}

To implement this on the webpage, I am calling the function on body load:

onload="binClock(); setInterval('binClock()', 1000)"

javascript string image replace

Answer 1

Answer №1

If you have an image element in your document with the ID your_img, you can update its source like this:

var path_to_img = ...
var image = document.getElementById('your_img');
image.setAttribute('src', path_to_img);

The variable path_to_img should be set to either the URL of 0.png or 1.png depending on a certain condition.

If there is no existing IMG element, you can create one and append it to the DOM using the following code:

var path_to_img = ...;
var parent_element_id = ...;
var parent = document.getElementById(parent_element_id);
var image = document.createElement('IMG');
image.setAttribute('src', path_to_img);
parent.appendChild(image);

In this case, parent_element_id refers to the ID of the element under which you want to insert the new IMG element.

Answer 2

If you have an image element in your document with the ID your_img, you can update its source like this:

var path_to_img = ...
var image = document.getElementById('your_img');
image.setAttribute('src', path_to_img);

The variable path_to_img should be set to either the URL of 0.png or 1.png depending on a certain condition.

If there is no existing IMG element, you can create one and append it to the DOM using the following code:

var path_to_img = ...;
var parent_element_id = ...;
var parent = document.getElementById(parent_element_id);
var image = document.createElement('IMG');
image.setAttribute('src', path_to_img);
parent.appendChild(image);

In this case, parent_element_id refers to the ID of the element under which you want to insert the new IMG element.

Answer 3

Answer №2

Here is a demonstration of how it can be achieved using jQuery. However, if you prefer, you can easily replace it with the vanilla JavaScript DOM method.

const binaryYear = new Date().getFullYear().toString(2);
[...binaryYear].forEach(digit => {
    $('#year').append('<img src="../img/digit' + digit + '.png');
});

// Check out this modified demo link http://jsfiddle.net/user123/aBcDeF/2/

Answer 4

Here is a demonstration of how it can be achieved using jQuery. However, if you prefer, you can easily replace it with the vanilla JavaScript DOM method.

const binaryYear = new Date().getFullYear().toString(2);
[...binaryYear].forEach(digit => {
    $('#year').append('<img src="../img/digit' + digit + '.png');
});

// Check out this modified demo link http://jsfiddle.net/user123/aBcDeF/2/

Answer 5

Answer №3

I have found my own way to solve this problem, understanding the syntax and the actions I am taking as I learn.

var currentYear = currentTime.getFullYear();
var currentMonth = currentTime.getMonth() + 1;
var currentDate = currentTime.getDate();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();

currentYear = currentYear.toString(2);
currentMonth = currentMonth.toString(2);
currentDate = currentDate.toString(2);
currentHours = currentHours.toString(2);
currentMinutes = currentMinutes.toString(2);
currentSeconds = currentSeconds.toString(2);

// Replacing numbers with image tags
currentYear = currentYear.replace(/0/g, "<img src='0.png' />");
currentYear = currentYear.replace(/1/g, '<img src="1.png" />');

currentMonth = currentMonth.replace(/0/g, "<img src='0.png' />");
currentMonth = currentMonth.replace(/1/g, '<img src="1.png" />');

currentDate = currentDate.replace(/0/g, "<img src='0.png' />");
currentDate = currentDate.replace(/1/g, '<img src="1.png" />');

currentHours = currentHours.replace(/0/g, "<img src='0.png' />");
currentHours = currentHours.replace(/1/g, '<img src="1.png" />');

currentMinutes = currentMinutes.replace(/0/g, "<img src='0.png' />");
currentMinutes = currentMinutes.replace(/1/g, '<img src="1.png" />');

currentSeconds = currentSeconds.replace(/0/g, "<img src='0.png' />");
currentSeconds = currentSeconds.replace(/1/g, '<img src="1.png" />');

// Updating HTML elements with the new values
document.getElementById("year").innerHTML = currentYear;
document.getElementById("month").innerHTML = currentMonth;
document.getElementById("date").innerHTML = currentDate;
document.getElementById("hour").innerHTML = currentHours;
document.getElementById("min").innerHTML = currentMinutes;
document.getElementById("second").innerHTML = currentSeconds;

You can see the code in action at

Answer 6

I have found my own way to solve this problem, understanding the syntax and the actions I am taking as I learn.

var currentYear = currentTime.getFullYear();
var currentMonth = currentTime.getMonth() + 1;
var currentDate = currentTime.getDate();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();

currentYear = currentYear.toString(2);
currentMonth = currentMonth.toString(2);
currentDate = currentDate.toString(2);
currentHours = currentHours.toString(2);
currentMinutes = currentMinutes.toString(2);
currentSeconds = currentSeconds.toString(2);

// Replacing numbers with image tags
currentYear = currentYear.replace(/0/g, "<img src='0.png' />");
currentYear = currentYear.replace(/1/g, '<img src="1.png" />');

currentMonth = currentMonth.replace(/0/g, "<img src='0.png' />");
currentMonth = currentMonth.replace(/1/g, '<img src="1.png" />');

currentDate = currentDate.replace(/0/g, "<img src='0.png' />");
currentDate = currentDate.replace(/1/g, '<img src="1.png" />');

currentHours = currentHours.replace(/0/g, "<img src='0.png' />");
currentHours = currentHours.replace(/1/g, '<img src="1.png" />');

currentMinutes = currentMinutes.replace(/0/g, "<img src='0.png' />");
currentMinutes = currentMinutes.replace(/1/g, '<img src="1.png" />');

currentSeconds = currentSeconds.replace(/0/g, "<img src='0.png' />");
currentSeconds = currentSeconds.replace(/1/g, '<img src="1.png" />');

// Updating HTML elements with the new values
document.getElementById("year").innerHTML = currentYear;
document.getElementById("month").innerHTML = currentMonth;
document.getElementById("date").innerHTML = currentDate;
document.getElementById("hour").innerHTML = currentHours;
document.getElementById("min").innerHTML = currentMinutes;
document.getElementById("second").innerHTML = currentSeconds;

You can see the code in action at

Replace text and numbers with images using Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Working with Unicode characters in Java using String.toCharArray()

JavaScript generating HTML code causing malfunctions

Encountered an error in NodeJs with mongoDB: TypeError stating that property 'fullname' is not defined

Tips for accessing a symbolic link in a Node.js application

`Issue with writing to file in Node.js`

jQuery live function is not functioning as anticipated

Code has been loaded successfully for react-loadable Chunks, however it has not been

Creating HTML code from a website by utilizing XML

Accessing a specific value based on a selected option in Angular 2+

Issue with React hook state persistence in recursive function

Google Maps Circle Radius Functionality Malfunctioning

Whenever I refresh the page, the values remain the same and only update when I log in

Having trouble integrating a custom plugin with CKEditor?

Assistance with AJAX Reload Interval (Polling) Functionality

Generating PDF files utilizing AJAX technology with FPDF

Issue with updating a React form by re-rendering with a state variable

JavaScript and jQuery validation issues persisting

Implementing a django like feature using ajax requests

"Enhancing HTML with jQuery Autocomplete for Advanced Search Results

I am interested in developing a JavaScript program that can calculate multiples of 0.10