Graphics vanishing during printing on document

Partaking in the Daily UI challenge to enhance my skills, but have encountered a hurdle.

After entering numbers into the Card Number field, it appears to be replacing the images I uploaded.

There might be something glaringly obvious that I'm missing out on.

The code is somewhat disorganized, but I'm still fairly new to this, so please bear with me!


            @import url("https://fonts.googleapis.com/css?family=Arimo|Roboto");
            @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");

            #wrapper {
              height: 600px;
              width: 600px;
              background-color: white;
              margin: 0 auto;
              border-radius: 10px;
              padding: 20px;
              text-align: center;
              font-family: "Roboto", sans-serif;
            }

            /* CSS code continues... */
        

            <!DOCTYPE html>
            <html>

            <!-- HTML content continues... -->
        

Answer №1

Within your HTML code, you currently have:

<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditCard').innerHTML=this.value">

The element you are retrieving is the one with the ID 'creditCard', representing the whole credit card.

Consider modifying it to:

<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('printNumbers').innerHTML=this.value">

This adjustment will allow you to target the element by the ID 'printNumbers', enabling you to update the innerHTML of the #printNumbers element instead.

Answer №2

The correct method to use is

document.getElementById('printNumbers').innerHTML=this.value
instead of using
document.getElementById('creditcard').innerHTML=this.value
.

The second option completely replaces the HTML content with the assigned value.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Horizontal dropdown menus offer a sleek alternative to traditional vertical dropdown layouts

How can I fix this issue with my drop-down menu? It looks fine until I hover over it and the menu turns horizontal instead of vertical. Could it be a CSS problem? Thank you for your assistance! JS Fiddle HTML <body> <div id="wrapper"> < ...

Tips on adjusting the height of divs in a simple layout

I'm trying to make two divs fill the page with a ratio of 70% and 30%. However, I don't want to set the size of the "html" or "body" elements. How can I achieve this without affecting the height of the text within the divs? Currently, it only dis ...

How can I output HTML code using php echo without using quotation marks?

My issue involves printing out HTML code that is not stored as a simple string, requiring me to decode it before echoing. The problem arises when I echo the decoded value and unwanted quotes appear, disrupting the output. Here's an example: <div> ...

Combine a string and integer in JavaScript without using quotation marks between them

Is there a way to concatenate a string and an integer in JavaScript without getting the ": Here is the code snippet: "<agm-map latitude=" + response.latitude + " longitude=" + response.longitude + "></agm-map>"; What it currently results in: ...

Creating dynamic Vue2 router links based on server-generated data

Currently, I am working on a Vue2 Single Page Application that fetches content from the server and allows clients to edit it in a Content Management System (CMS). The issue I'm facing is that when a user adds a relative link such as /about-us, Vue do ...

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Looking to create a card flip effect similar to the one shown here. Once the sign up process is finished, the card will smoothly flip over to reveal the other side with a transitioning effect. ...

Utilize express.router() to send a get request to a third-party API while including an API key

As I develop my react application, I am faced with the task of retrieving data from a third-party site that requires me to include an API key in the header as 'X-Auth-Token'. Currently, I am using the fetch() API from the client-side JavaScript ...

Select a hyperlink to access the corresponding tab

I've been playing around with bootstrap and AngularJS. I placed nav-tabs inside a modal-window and have it open when clicking on a link. However, I want the appropriate tab to open directly upon click. For example, if I click on "travel", I want the t ...

typescript event handling with oninput

When working with a slider, I am trying to detect when the user changes the value of the slider in order to display it. I have been following the tutorial at https://www.w3schools.com/howto/howto_js_rangeslider.asp. However, this code is not compatible wi ...

Express causing textarea in http form to have empty req.body

Here is a form for users to upload a file and submit text: form(action='/createpost' enctype="multipart/form-data" method='post' id="imgForm") input(type='file' name='imgPath' size = "60") br textarea(na ...

Error: The function setOpenModal is not defined

I'm currently working on creating a login modal popup that will appear when a button inside a navbar is clicked. However, I'm encountering the following error: TypeError: setOpenModal is not a function Despite going through various discussions ...

A guide on properly formatting an Array of Objects in JavaScript based on the contained data

My goal is to create an Array of Object that groups the same weekday data into one object. For example, if we have weekday:1 in five objects, the desired output would be: { ..., weekDay: 1, repeated: 5 } While I can achieve this by hard coding a solution ...

What is the method to apply the active class to pagination when the page is initially loaded on the first page?

I am facing an issue with setting the active class when not paging, specifically when the user is on the first page. The idea is that when a user visits the posts page, the default active pagination should be 1. Below is the code snippet I am using: let pa ...

Filtering text boxes based on radio button selection

I have a RadioButtonList and a TextBox. Depending on the selection made in the RadioButtonList, I need to filter the content of the textbox. <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="RadioB ...

Tips for efficiently calling a function without the need to check if it exists beforehand

I'm looking for a way to access the formik props outside of the form without constantly checking if a function exists before calling it when using refs. Any suggestions on how to achieve this? function BasicInfo({ event, initialValues, onSubmi ...

Using jQuery to convert JSON data into an array

My JSON data structure is as follows: { "default": [ [ 1325876000000, 0 ], [ 1325876000000, 0 ], [ 1325876000000, 0 ], [ 1325876000000, 0 ] ], "direct": [ [ 13 ...

The PHP script is not receiving any data when checking if the value is set in the $_POST variable

I'm attempting to transmit values from a JavaScript file using POST method to a PHP page. Here is the AJAX code: let userInput = $input.val(); $.ajax({url: "../checkout/test.php", type : 'post', data : {'userInput': user ...

Manipulating webpage content with JavaScript

How can I provide visual feedback to a user while an ajax request is in progress? For example, when a user clicks a 'process' button that triggers an AJAX request to a server-side script, they should see a 'loading...' message and a gra ...

What is the method for printing a webpage that has been modified using JavaScript?

Take a look at this screenshot to see what I'm working with. Users have the ability to modify the page by removing items, adding new items, or marking items as complete by crossing them out. I want users to be able to print the altered page using Jav ...

How can you animate the background of a website using AngularJS - CSS or JavaScript?

My aim is to create a dynamic animation for the background image when the view changes. The current background image is set through a function defined within MainController: // app/js/controllers.js $scope.getBg = function() { return $route.current.sco ...