Swapping out data within a container

I've been experimenting with creating a hangman game using JavaScript and HTML. However, I'm facing an issue where clicking on a letter doesn't replace the "_" placeholder.

var myList=["Computer","Algorithm","Software","Programming","Developer"];
var n;
var star="_";
console.log(myList)
computer=myList[Math.floor(Math.random() * myList.length)];
console.log(computer);
var word= document.getElementById("word").innerHTML=star.repeat(computer.length);
var letter=document.getElementsByClassName("col")
function myFunction(){
    n=word.replace(star,letter);
};
for (var i=0; i<letter.length;i++){
    letter[i].addEventListener("click",myFunction());
}
myFunction();

The "letter" elements represent the alphabet in this case (they are not buttons but divs). The "word" element is an empty div that should display "-" characters, which should be replaced by the clicked letters.

Answer №1

Check out this functional example:

var myList=["Apple","Orange","Banana","Grape","Kiwi"];
var star="_";
var container = document.querySelector('.container');

for(var i = 0; i<myList.length; i++) {
   var list = document.createElement('div');
   list.setAttribute('class', 'container-list');
   list.setAttribute('id', 'list'+i);
   container.appendChild(list);
   for(var j=0; j<myList[i].length;j++) {
      var item = document.createElement('div');
      item.setAttribute('class', 'container-list__item');
      item.innerText = myList[i][j];
      list.appendChild(item);
      item.onclick = function(e) {
          this.innerText = star;
      }
   }
}
.container .container-list {
    display: flex;
}

.container .container-list__item {
    padding: 5px 10px;
    border: 1px solid #dedede;
    margin: 5px;
    text-transform: uppercase;
    cursor: pointer;
}
<div class="container"></div>

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

Errors can be thrown when using React and classNames in the class component

I'm relatively new to React and currently working on a large project. I've run into an issue where I can't use both class and className on all elements and components, particularly custom ones. To work around this, I've had to place the ...

How is it possible that my array becomes reversed without any intervention on my part?

As I work on developing a website, I encountered a puzzling issue with the calculations inside the router. Despite initializing the array tomato with the desired values, it seems that the values get reversed just before rendering the page. Here is the code ...

Transforming background color upon click using Vue

I'm trying to change the background color from blue to a different color when a button is clicked. However, the code I've written so far doesn't seem to be working. HTML <script src="https://cdn.jsdelivr.net/npm/vue"></script> ...

How can a static website incorporate a local image without the need for backend functionality?

I have a unique challenge with my static website. It is designed to display a local image from the user's computer without utilizing a traditional backend system. The website itself is hosted on a static file server, and all image processing must be d ...

Is there a way to dynamically shift arrow key focus onto buttons in Angular using the left and right arrow keys?

I am facing an issue where pressing the arrow keys left and right does not focus or allow me to navigate through these buttons using the arrow keys. However, when checking the keycode values, they are printed according to the key pressed. I would like to k ...

What is the best way to convert a state variable into a string in this scenario?

I have encountered an issue while using the NPM package react-date-countdown-timer. The countdown timer in this package requires a specific format for implementation: <DateCountdown dateTo='January 01, 2023 00:00:00 GMT+03:00' callback={()=> ...

Looking to activate a button only when the checkbox is selected and in an enabled state

I'm struggling to make the button enable when the checkbox is checked and enabled. Additionally, it should be dependent on the textarea scroll above it. Once the checkbox is checked, the page needs to scroll up and down to activate the button. Here& ...

Encountering the 'data is null' error when making a Twitter API request, yet the data is successfully displayed in the browser

I am attempting to show the number of followers for a Twitter account, but when I connect to the API using this code: $.getJSON("https://api.twitter.com/1/users/show.json?screen_name=uswitchTech&include_entities=true", function(data) { console.log ...

Optimized printing layout with Bootstrap

Having some trouble printing an invoice I created using HTML and Bootstrap CSS. The issue is that the content doesn't print in full width, even after changing the media from screen to all. Check out how it looks on the web: Here's how it appear ...

Creating a visually appealing webpage by utilizing Bootstrap and HTML for the layout

I am in the process of learning html and Bootstrap for CSS. Below is the code I currently have: <div class="container"> <div class="row text-center mb-4 mt-2"> <div class="col-md-12"> <div cla ...

Retrieving a JavaScript variable in PHP on the identical page by simply altering the div tag within the URL

I have a webpage called abc.php that showcases a table of image names. When a user clicks on an image name, an overlay page is loaded at #openModal on the same abc.php page. This new overlay page displays a list of sensor values related to the selected ima ...

Issues with HTML Email display

Hey there, I am facing an issue while trying to send an HTML email. I am aware that Outlook does not support a lot of CSS formatting, but I can't figure out why this simple setup is breaking. Is there a quick fix or alternative solution? Take a look a ...

Error: JSON parsing error due to unexpected token C at the beginning of the string

When using ajax and json formatting, I am encountering this message. In PHP, the code array("message" => "Success", "data" => $data) is displayed successfully. However, it is not able to callback to ajax. How can I resolve this issue without deleting ...

Is it possible to utilize WebRTC (simple-peer) with STUN without the need for additional signaling?

I am currently exploring the utilization of the simple-peer library to create browser-to-browser WebRTC connections through data channels. My understanding, although it may be flawed, is that for two browsers to establish a connection via WebRTC, they need ...

What could be causing the delay in $q.all(promises).then() not waiting for the promises to complete?

Currently, I am tasked with utilizing AngularJS 1.5.5. My task involves making calls to multiple Rest-Services and handling the results simultaneously. $scope.callWebservices = function(){ let promises = { first: callFirstWebservice(), ...

Troubleshooting issues with data parsing in an Angular typeahead module

Utilizing the AngularJS Bootstrap typeahead module, I am attempting to showcase data from an array of objects. Despite receiving data from my API call, I keep encountering the following error: TypeError: Cannot read property 'length' of undefine ...

I encounter issues with HTML input fields becoming unresponsive whenever I attempt to apply CSS filters in IE8 for stretching the background

When I wanted to stretch a background image on my website so that it always fills the available window area regardless of resolution, I initially used background-size:cover;. Unfortunately, Internet Explorer doesn't seem to support valid CSS, so I had ...

Ensuring Proper Sequence of Function Execution in Angular Directive

I'm a bit confused after reading the following two blogs: Blog I: Eric W Green - Toptal Order of execution Compile -> Controller -> PreLink -> PostLink Blog II: Jason More Order of execution Controller -> Compile -> PreLink ...

My pen doesn't accurately display the ID

CHALLENGE var shoppingCenters = [{ id: 0, name: 'Leclerc', location: 'Paris,France', address:'Boulevard Rahal El Meskini Casablanca Maroc', ] }, { /*Malls B*/ id: 1, name: 'Carefour', location ...

Adjusting div to not be absolutely positioned

Trying to create a div with animated borders, but it only works when positioned absolutely in the center. For illustration, here is the HTML and CSS code: .bb, .bb::before, .bb::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; ...