Looking to display outcomes on a separate line every time you click? Currently developing a project involving Rock, Paper, Scissors

I have been tackling the Rock Paper Scissors project from The Odin Project.

Take a look at the interface I have developed so far:

My goal is to display the results on new lines every time a button is clicked.

  • Instead, they are appearing next to each other on the same line.

I have attempted various strategies:

  • Adding \n at the end and/or beginning of each answer string (unsuccessful); manipulating the DOM to create new 'p' element or 'br' element, storing it in a constant variable called 'newLine', and appending as " + newLine" after each string (resulted in [HTMLElementp or HTMLElementbr] displaying in the browser); adding each answer as a new list item (did not work).

What do I need to do to make them appear on separate lines?

You can view the code here: https://github.com/Catito1990/RockPaperScissors/blob/main/javascript.js. There are additional elements that I haven't had the chance to work with yet because I've been stuck on this issue for 2 days.

Appreciate any help!

javascript

Answer №1

It appears that you have a p element identified as "scorecard". To enhance its appearance, consider changing it to a div and implementing the following style:

display:flex;
flex-direction:column;

Additionally, after each round concludes, insert a new p element containing information about the match. As you add more p elements, they will automatically be displayed on separate lines.

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

Ways to dynamically emphasize text within ngFor loop

Within my ngFor loop, I have a set of rows. <div *ngFor="let block of data;"> <div class="class-row"> <div class="left">A Label:</div> <div class="right">{{block.key1}}</div> </div> <div class="clas ...

javascriptangularangular2-template

Firestore/Javascript error: FirebaseError - The data provided is invalid for the DocumentReference.set() function. An unsupported field value of 'undefined'

I keep encountering this error Error creating user: FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field diabetesComplication) After some investigation, I realized that the iss ...

javascriptarraysjsongoogle-cloud-firestore

The script was denied execution due to the non-executable MIME type ('text/html') and the activation of strict MIME type checking

I'm currently attempting to retrieve data from the forismatic API, but I'm not receiving any response. I'm using AJAX in jQuery, however, I keep encountering the following error in my console: The script at '' was refused to execu ...

javascriptjqueryjsonajaxjsonp

When developing a multi-page application using React, encountering the error "TypeError: Cannot read property 'pathname' of undefined" may indicate an issue

I am facing an issue while trying to develop a multi-page application using react-router. As I am new to React, I find it difficult to explain the problem clearly. My goal is to incorporate a login page into the application. Suggestions and alternative app ...

javascriptreactjswebpackreact-routerreact-dom

Tips for converting characters in an array to a Caesar cipher

I tried setting up an array that correlates capital letters with their corresponding Caesar cipher letters, so for example, A would shift 13 places to become N. I attempted to write a code that could generate this transformation, but I seem to have made an ...

javascriptarrays

Using the Change event of BootstrapSlider in JQuery is a straightforward process that can enhance the

There are two queries I have regarding the Bootstrap slider. First, how can I implement a change event in the BootstrapSlider and retrieve the value? Secondly, how can I modify the initial value of the Bootstrap slider? ...

javascriptjquerybootstrap-4

Use the fetch method to send a request from an HTML file that is being served through a

In my current setup, I have this code snippet to serve an HTML file via Go server. func main() { http.HandleFunc("/", func(rw http.ResponseWriter, r *http.Request) { path := r.URL.Path if path == "/" { pa ...

javascriptgofetch-api

Unable to create a universal <header> and <footer> to be displayed across all pages

After trying to separate the <header> and <footer> into external files, everything seemed to work fine in the console. However, when running the code, it ended up returning undefined. This is the HTML for the Footer: <footer id="footer ...

javascripthtmljquerycssbootstrap-4

Types with conditions but no common parameter

I am looking to define my props as either type A or B. For instance export default function App() { type Checkbox = { type: "checkbox"; checked: boolean; }; type Dropdown = { type: "dropdown"; options: Array<an ...

javascriptreactjstypescript

Javascript Rest for y moments

My website's JavaScript function uses AJAX to retrieve account information and open a modal for viewing and editing. Sometimes, the details don't update quickly enough in the database before the function collects them again, leading to discrepanc ...

javascriptjquerysleep

"Implementing a feature in AngularJS to dynamically display markers on a Google Map based on latitude and

I am a newcomer to AngularJS and I am attempting to pass my JSON latitude and longitude based on ID into the Google API. Here is the structure of my JSON file: { "totalCount":206, "deals":[{ "id":"2", "Name":"samir", "locations":[{ ...

javascriptjsonangularjsgoogle-mapsangularjs-google-maps

Enhancing Bootstrap Carousel with various effects

My exploration of the web revealed two distinct effects that can be applied to Bootstrap Carousel: Slide and Fade. I'm curious if there are any other unique effects, such as splitting the picture into small 3D boxes that rotate to change the image? ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Utilizing jQuery or Javascript to obtain the title of the current webpage, find a specific string within it, and then apply a class to the corresponding element

Let's imagine I start with this: <title>Banana</title> and also have some navigation set up like this: <ul id="navigation"> <li> <a href=#">Banana</a> </li> </ul> Upon loading the sit ...

javascriptjqueryhtmlcss

How to choose `optgroup` in Vue 1.x

In previous iterations of vue.js, developers had the ability to generate a dynamic select list utilizing optgroups similar to the example found here. In the latest versions of vue, the documentation suggests using v-for within the options instead of optgr ...

javascriptvue.js

Guide for setting up multiple checkbox event listeners with jQuery

I currently have 2 checkboxes on my form: <form action=""> <input id="bikeCheckbox" type="checkbox" name="bikeCheckbox" value="Bike">I own a bike<br> <input id="carCheckbox" type="checkbox" name="carCheckbox" value="Car">I ...

javascriptjquery

Determine the number of true or false elements in an array using either JQuery or JavaScript

Consider the scenario where arrays of varying lengths are structured like this... Array [ true, false, false, true ] Or Array [ true, true, true, false, true ] Or Array [ true, true, true ] The objective is to iterate through an array and only trigge ...

javascriptjqueryarrays

How to use PHP and JavaScript to update a location marker on Google Maps

I'm new to web development and in need of some help, please. I have a code that is supposed to update the marker location with coordinates retrieved from a database. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AP ...

javascriptphphtmlajaxgoogle-maps-api-3

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

Having trouble with a Bootstrap HTML page featuring a video background? The issue is that sometimes the video has borders on the left and right, and occasionally on mobile devices as well. Oddly enough, when the browser (Chrome or Firefox) is refreshed, th ...

javascripthtmlcsstwitter-bootstraphtml5-video

JavaScript or jQuery for filtering table rows

I have limited experience with JavaScript and jQuery, but I am working with a table containing various entries. My goal is to implement a filtering system using a list on the left side of the table. Here is an example I put together: http://jsfiddle.net/B ...

javascriptjquerypythonajaxdjango

Getting a URL to redirect after a successful login via an AJAX request in PHP

I've been trying to figure out how to redirect the URL after a successful login using an Ajax call in PHP. Can someone please review my code and point out any mistakes? Here is the content of the registration.php file located at http://localhost:8080 ...

javascriptphpjqueryajax