What is the best way to tally a score after analyzing two spans in Javascript?

I have 3 spans where 2 contain an alphabet each. The third span is left blank for the result of comparing the first 2 spans. I need to display the result in the last span, showing a value of 1 if the two spans contain the same alphabet. Can anyone suggest how I can achieve this?

Answer №1

It appears that you have three spans in your code, with two containing letters of the alphabet and one being empty.

<span id="span1">b</span>
<span id="span2">b</span>
<span id="span3"></span>

Your goal seems to be comparing the content of the first two spans. If they match, the third span will display 1; otherwise, it will show 0:

if(document.getElementById('span1').innerHTML == document.getElementById('span2').innerHTML) {
    document.getElementById('span3').innerHTML = '1';
}
else{
    document.getElementById('span3').innerHTML = '0';
}

Check out the DEMO here

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

The program encountered an error stating: "require variable not found at"

I am facing an issue while using jasmine with Grunt. Every time I run my jasmine tests, I encounter the following error: ReferenceError: Can't find variable: require at In my Gruntfile.js, this is how I have configured jasmine: jasmine: { js: ...

Issue with date comparison operator logic

Here's a simple JavaScript function I have: function checkTime() { var current = new Date(); var target = new Date('April 10, 2017 12:11:00'); if (current < target) { $('#modalnew').modal('show'); } els ...

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

The Typescript Decorator is triggered two times

I submitted a bug report regarding Typescript because I suspect there is an issue, although I'm seeking additional insights here as well. This is the scenario. When running the following code: class Person { @IsValueIn(['PETER', ' ...

What could be causing the <td> onclick event to fail in asp.net?

Having an issue with making a <td> clickable to display a div. Check out my code snippet below: <td id="tdmord" style="padding-left: 15px; color: #86A7C5; padding-right: 15px; font-family: Arial; font-size: small;" onclick="return showDiv1()"& ...

What approach does JavaScript take when encountering a value that is undefined?

Having recently delved into JavaScript and exploring a book, I came across an interesting example in the recursive chapter: function findSolution(target) { function find(current, history) { if (current == target) return history; else if (c ...

Transforming the setting into redux using setTimeout

I am currently working with the following context: interface AlertContextProps { show: (message: string, duration: number) => void; } export const AlertContext = createContext<AlertContextProps>({ show: (message: string, duration: number) =&g ...

Using AngularJS to add a unique custom class directive to each item in an ng-repeat loop

Can anyone help me figure out why the width of a div isn't being set dynamically using AngularJS? <ul id="contents"> <li ng-repeat="content in contents"> <div class="content_right custom_width"> <div class="title"> ...

Obtain JSON information from a Javascript response using Puppeteer:

While developing a test with Puppeteer and Node, I encountered the need to extract an access token from a response after logging in. Here is the current code snippet: //Click Login Button const loginButton = await page.$(".click-button.dark.ng-star-i ...

There is no Api.js file in the Cordova iOS platform

I have been attempting to integrate the iOS platform into a new Cordova 7.0.1 project, but I continuously encounter the error mentioned in the title of this post. Despite following the steps outlined in this thread here, including removing and re-adding ...

Exploring File Read and Write Functionality in Angular 4

I want to develop an offline Task List in Angular 4. However, I am facing difficulty in finding a method to save data in a file on the client side using JavaScript or Angular. My current approach involves using browser's localStorage, but it is slow ...

Content obscuring dropdown menu

I am currently working on a screen design that resembles the following: return ( <SafeAreaView> <View style={styles.container}> <View style={styles.topContainer}> <View style={styles.searchFieldContainer}> ...

The for loop is throwing an error because the variable 'i' is not defined

I recently started using eslint and I'm in the process of updating my code to comply with my eslint configuration. module.exports = { env: { browser: true, commonjs: true, node: true, es2021: true, }, extends: 'eslint:recomm ...

What is the best way to center my navigation bar without interfering with the mobile version's JavaScript functionality?

Just starting out with web development and stack overflow, so please bear with me if I struggle to explain the issue. I came across some JavaScript to make my website responsive on small screens (mobiles). However, I am having trouble centering my top nav ...

The script fails to execute on content loaded through AJAX in Django

I have a website with nested div elements that make up a complete set. These elements can be dynamically loaded when the user clicks the "load more" button. The website includes a script that changes the style of the aforementioned div element when the pa ...

Retrieve the latest information and update the database with just one ajax request

I am attempting to update a row in the database and retrieve the updated row one at a time using an AJAX call. JavaScript inside the ready function $("button[name='teacher_lock_exam']").on(ace.click_event, function () { var current_exams_id ...

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

Restrict the number of GET requests made using D3.js and the Twitter API

Currently, I have made adjustments to my D3.js chart by switching from mouseover/mouseout events to mousemove. While this change has caused several issues in the chart, the most significant one pertains to my GET statuses/show/:id requests. In the past, h ...

Create a form action dynamically with JavaScript

html code : <section class="main"> <form class="form-4" name="form4" id="form4" method="POST"> <p class="submit"> <button type="submit" name="submit" onclick="show()"><i class="icon-thumbs-up icon-large"></i> ...

Retrieving data from varied React components - triggered by clicking a LOG button

function Copy() { const Message = "MESSAGE"; const [messageList, setMessageList] = useState([{ text: "Hello", id: 1 }]); const [newMessageValue, setNewMessageValue] = useState(0); const addToMessageList = () => { alert(n ...