Showing a notification that is persistent and not dismissible

Hello everyone! I've been struggling with a problem on the RPS project for quite some time now. The issue arises when I try to display a message for a tie in the game, but I can't seem to find a solution to make it disappear when the round is not a tie.

Everything runs smoothly except for the last two else if conditions. In one of them, I attempted to show the tie message when the player's choice matches the CPU's, and in the other condition, I thought I could use an if statement to replace the previous tie message with an empty string. I tried using code like "if (playerSelection !== computerPlay) then the tie message changes to an empty string", but unfortunately, it's not working as expected.

I'll include the code below:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="queries.css" />
  </head>
  
  <!-- Body content -->
  
>

Answer №1

To ensure proper execution, it is advised to eliminate the else statement preceding the final if.

This adjustment will guarantee that when the selections do not match, one of the previous if statements will be activated without triggering the else block.

Answer №2

Consider modifying the div where you show the outcome like this:

<div class="game-decisions">
      <div class="decision">
        <span id="game-result"></span>
      </div>
</div>

Then, adjust the innerText of game-result in your JavaScript based on the game state in your conditional statements - "player wins", "computer wins", or "it's a tie". This will streamline your JavaScript and HTML. If you want to display them differently (e.g., in a different position), you can achieve that by adding class names dynamically using JavaScript and styling them in your CSS.

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

How can I force a variable width font to behave like a fixed width font in HTML?

Is there a method to emulate the appearance of a fixed-width font using a variable width font in HTML? For instance, if I were to display the phrase "The quick grey fox jumped over the lazy dog" in "Courier New," a fixed-width font, it would appear wider ...

Issue with improper lighting on Three.Geometry objects when using LambertMaterial in Three.js

After enhancing my initial version of this inquiry (previously asked question) with a JSFiddle showcasing the latest build of Three.JS and illustrating the lighting issue on Three.Geometry, I encountered difficulties with dependencies in Stack Snippets. Ho ...

Would combining node.js with express for the back-end and emberjs for the client side be a suitable choice for my project?

As a seasoned web developer, I have limited experience with nodejs and have yet to dive into the world of emberjs (although I have worked extensively with backbone). I am embarking on a new project to create a web-based writing application focused on lite ...

HTML5 input placeholder adapts its size and position dynamically as data is being

During my interaction with the input fields on my bank's website, I noticed that the placeholder text undergoes a unique transformation. It shrinks in size and moves to the upper-left corner of the input field while I am entering information. Unlike t ...

Setting the default value for drop-down menus in jqGrid form editing

I have a data object with 3 attributes: ID Abbreviation Description In my jqGrid setup, I've configured the grid to display the Abbreviation. During editing (using the Form Edit feature), I populate the dropdown list with ID/Description pairs usin ...

What is the best way to load the nested array attributes in an HTML table dynamically with AngularJS?

I attempted the following code, but I am only able to access values for cardno and cardtype. Why can't I access the others? Any suggestions? <tr ng-repeat="data in myData17.layouts"> <td ng-show="$index==1">{{data.name}}</td> &l ...

The intersection of CSS and IE7's Z-Index feature

Hey there, I could really use some help! If anyone has any ideas for fixing a z-index issue in Internet Explorer 7 with CSS/JavaScript on this page while keeping the DOM structure intact (it's currently optimized for easy tab navigation), I would gre ...

Guide to incorporating JSON data into HTML through JavaScript

As I attempt to load data from a JSON file to .js and then to an HTML file, I am facing a challenge. While I can successfully load the JSON values into .js, I am unable to transfer the same values to HTML. Below is the code snippet - could anyone provide a ...

The specified SVG marker identifier could not be located

https://i.stack.imgur.com/xQhWg.png I am managing a web block list that consists of different divs, each containing specific code that is displayed based on the sent ID. Below are the codes for each div: Div1 <svg width='200' height=&apos ...

Is it possible to manipulate content using jQuery?

I need help figuring out how to update the content within a span tag when a user clicks on a button. The specific span tag I am trying to target has a class called fa_button_id_counter and an id that corresponds to the post id. Despite my efforts, I haven& ...

Choosing text input after adding a dynamic HTML row can be done by identifying the specific characteristics

I am currently working on a CodeIgniter project where I have implemented a purchase form that allows users to search for spare parts items using autocomplete in an input text field. The initial search functionality is working fine, but when I try to add a ...

Display React elements on the web page

Seeking assistance from anyone! I've been grappling with a problem and can't seem to figure out a solution. Here's the scenario: My current setup involves a sidebar and a top bar for navigation in React. Check out my app so far in this imag ...

Encountering an error stating "ngbCollapse" is not a recognized property of "div" after relocating components to a sub module

Error compiler.js:215 Uncaught Error: Template parse errors: Can't bind to 'ngbCollapse' since it isn't a known property of 'div'. ("][ngbCollapse]="isHidden" In the process of organizing my code, I encountered an issue ...

leveraging the situation and a clever opening

Currently, I'm diving into mastering the proper utilization of context and hooks. Initially, everything worked flawlessly while all components remained within a single class. However, troubles arose when I segregated them into multiple classes leading ...

What is the best way to access data from this $scope in AngularJS?

Upon printing selecteditems to the console, this is the output: [{"model":"Lumia","brand":"Nokia","subModel":["Lumia 735 TS","Lumia 510"],"city":"Bangalore"}] I have stored it in $scope.details as follows: var selecteditems = $location.search().items ...

Unable to export to Excel using TableTools feature

Trying to export a DataTable view to Excel using the TableTools plugin, but encountering issues with the "Excel" button not working. Without a step-by-step tutorial for guidance, here's the code used in a test HTML: <!DOCTYPE html> <html ...

Installing a node.js application on elastic beanstalk with express framework

I've been struggling with deploying my application to Elastic Beanstalk throughout the entire day. The project structure I have is as follows (a single page app built with React) dist/ index.html bundle.js package.json app.js I compress it into ...

Ways to identify when the socket has been opened by the client?

When utilizing socket.io on the client browser side, is there a way to identify when the socket connection has been successfully opened? I am also interested in monitoring other standard messages such as errors and disconnections. In comparison to the Web ...

Using AdBlock Plus will conceal elements on a webpage that have ids or classes containing the term "ad"

In my website, there are two divs: one with the ID of ad_holder and the other with the ID ad_buttons. While testing the site on Mozilla with Adblock Plus installed, I observed that both divs were hidden. Upon further investigation, I discovered that Adblo ...

Curved divs display outlines on more compact dimensions

Check out this relevant Codesandbox There seems to be a recurring issue in my application where rounded divs display edges when they are of smaller sizes. Refer to the image below for a visual representation. What could be causing this problem and how can ...