When an onblur event triggers a JavaScript function, it produces an alert message without modifying the innerHTML content within an element

One of the functions I wrote involves setting the innerHTML of a particular span with the id "mail_not_valid" to display a message when a user attempts to submit an invalid email address. This function works as intended. Additionally, another function is set to clear the input field upon onfocus trigger. A third function triggered by onblur resets the input field to its original value if nothing new was entered. However, a problem arises when a user clicks on the field (clearing it), enters an invalid email (span displays error), and then deletes their entry before leaving the form; in this scenario, the span remains visible.

I attempted replacing document.getElementById("mail_not_valid").innerHTML = ""; with an alert, which did work. Surprisingly, changing the innerHTML directly does not have the desired effect.

EDIT: Upon further examination, I realized my mistake – the function cannot successfully execute if the user had already entered information: if (!(feld.value))

<input onblur="OnBlurCondition (this, 'subscribe to the e-mail newsletter')">

<script language="javascript">
function OnBlurCondition (feld, inhalt) {
        if (!(feld.value)){
                feld.value = inhalt;
                if (document.getElementById("mail_not_valid").innerHTML == "that doesn't seem right."){
                    document.getElementById("mail_not_valid").innerHTML = "";
                }   
        }
}
</script>

Answer №1

There appears to be a typing error. The correct code snippet is as follows:

if (document.getElementById("mail_not_valid").innerHTML == "that doesn't seem right."){
    document.getElementById("mail_not_valid").innerHTML = "";
}

Make sure to use a single equal sign.

Remember, avoid copying and pasting code. It's best to use a quality editor or IDE instead. Copying and pasting can lead to mistakes! :)

Answer №2

modify innerText == "" to innerText = ""

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

Issue with the alphabetical ordering of subpages

My PageSidebar.js component lists child pages alphabetically. https://i.sstatic.net/DZro1.png However, when I navigate to a child page, the alphabetical order is not maintained. https://i.sstatic.net/fRVgO.png I've tried multiple solutions but hav ...

Raycasting intersections in Three.js

After successfully creating geometry and functions to manipulate it, I integrated them into a javascript UI library . However, I encountered a problem where the raycaster function was detecting intersections with geometry even when not directly under the m ...

Updating the Background Image Based on Text Input in JavaScript

Struggling to utilize the text entered into a text input field as a background image URL. Ensuring it is valid is key. This snippet displays what has been attempted so far... CSS: body { margin: 0px; padding: 0px; border: 0px; } .bgimg { backgr ...

Error: The sort method cannot be applied to oResults as it is not a

I encountered this issue. $.ajax({ url: '${searchPatientFileURL}', data: data, success: function(oResults) { console.log("Results:...->"+oResults); oResults.sort(function ...

Looking to optimize this code? I have three specific tags that require reselection within a given list

for (var i=0; i<vm.tags.length; i++) { if (selectedTags[0]) { if (vm.tags[i].term_id === selectedTags[0].term_id) { vm.tags[i].border1 = true; } } if (selectedTags[1]) { if (vm.tags[i].term_id === selecte ...

Retrieving a specific document from an array that meets a specific query using MongoDB in JavaScript

I have a collection of data stored in MongoDB structured like this: users: { { user_id: 1000, activities: [ {id: 1, activity: 'swimming'}, {id: 2, activity: 'running'}, {id: 3, activi ...

An error popped up out of the blue while attempting to execute Webpack

Looking to deploy my React website on IIS but encountering an error when running npm run build:prod. The error message states: index.js Line 1: Unexpected reserved word. You may need an appropriate loader to handle this file type. Below is the snippet fro ...

How to prevent panning on mobile devices in Three.js using Javscript?

Currently working on my 3D project using three.js and everything is running smoothly on my laptop. I'm utilizing OrbitControls for camera movement, but I have disabled right-click panning to only allow camera rotation. However, when testing on a mobil ...

Generating and Importing Graphics through Iterations in Javascript

I apologize for my lack of experience in this matter. Can someone please guide me on how to utilize a loop to load images? For instance, could you show me how to rewrite the code below using a loop to automate the process? function loadImages() { let ...

Learn how to extract values from an object in Vue JS time-slots-generator and display either PM or AM based on the

Using the time-slots-generator package, I am able to display the time from 0:15 to 24:00. However, the issue is that this package does not have built-in functionality to display AM/PM, so I had to create a manual solution for it. To achieve this, I modifi ...

Changing icons using JQuery when clicking 'show more' or 'show less' buttons

I am currently utilizing https://github.com/jasonujmaalvis/show-more to display and hide text content on a mobile device. My goal is to switch between images for show more and show less: Here's what I have so far: Jquery: Source File: ; (function ...

Experiencing difficulties in transmitting multipart form data from React to Express Js accurately

I am facing an issue with uploading files using Dropzone and sending them to a Java backend API from React JS. In this scenario, React sends the document to Express backend where some keys are added before forwarding the final form data to the Java endpoin ...

What is the best way to reset the selected label in a React Material AutoComplete component when the state is

I currently have a state declared as: const [searchEntryNo, setSearchEntryNo] = useState(''); In addition, there is a function set up to clear the state when needed. const handleClear = () => { setSearchEntryNo(''); }; Ne ...

Troubleshooting JavaScript in Internet Explorer 9

Currently, I am encountering an issue while attempting to debug JavaScript .js files in my Solution using Visual Studio 2010 and IE 9. Despite placing breakpoints in the files, I am unable to debug successfully. I have attempted various troubleshooting ste ...

In anticipation of a forthcoming .then() statement

Here is a return statement I have: return await foo1().then(() => foo2()); I am wondering, given that both foo1 and foo2 are asynchronous functions, if the code would wait for the resolution of foo2 or just foo1? Thank you. ...

Tips for converting JSON String data to JSON Number data

Hello everyone, I am facing an issue with converting the 'review' value from String to a numerical format in JSON. This is causing problems when trying to perform calculations, leading to incorrect results. The scenario involves saving user comm ...

What is the process for utilizing "yarn create <pkg-name>" command?

While browsing the Yarn blog, I came across a feature that caught my attention - yarn create. This function is similar to create-react-app. https://yarnpkg.com/blog/2017/05/12/introducing-yarn/ I decided to give it a try on my local machine by creating a ...

What sets MongoDB Shell Scripting apart from JavaScript?

I'm currently working on a homework assignment and I prefer not to share my code as it would give away the solution. However, I can provide some generic snippets. I must admit, I am a novice when it comes to javascript and Mongo, and I only learned ab ...

"Vanishing act: The mysterious disappearance of an empty JSON

After defining a JSON object and posting it to the backend (Node.js), there appears to be an issue. var imj = {}; imj.images = []; $.post("/image/uploadImages", imj, function(feedback){ ..... Unfortunately, when the backend received the data, the "images ...

Tab knockout binding

I have a section in my HTML with 2 tabs. The default tab is working properly, but when I attempt to switch to the other tab, I encounter an error. Can anyone provide assistance in determining why this error occurs? Here is the HTML code: <ul class="na ...