In my maze game app (created with vanilla JS), I dynamically remove and then add a 'user input' pop up box which allows the user to select the character they want and to enter their name. The'user input' pop up box is hardcoded in the HTML so that when the app first loads, it appears on the UI immediately.
Once the user has selected their character, entered their name, and pressed the 'start game' button, the pop-up box HTML is removed from the DOM using 'removeChild'.
Once the user has finished the maze, a 'leader board' pop up box is displayed which has a 'play again' button. When the user clicks this button, the 'leader board' pop up box is removed from the DOM and the 'user input' pop up box is displayed again.
The issue I am having is that when the 'user input' pop up box is displayed when the user clicks the 'play again' button, I am being presented with the error 'GET http://localhost:8080/undefined 404' in the console and I am unable to select a character or start another game.
I have a feeling this may do with the fact that I am using Webpack to bundle the code as when the 'play again' button is clicked, the page does not reload and as the HTML has been removed from the DOM and then added again, this is somehow causing the error?
Here is the relevant html:
<div class="container">
//THE BELOW PART OF THIS CODE IS REMOVED FROM THE DOM
<div class="users-input animated slideInUp">
<div class="users-name">
<input
class="users-name-input"
type="text"
name="Name"
placeholder="Enter Name"
required
/>
</div>
<div class="select-character-text">
<p>Select Character</p>
</div>
<div class="character-select">
<ion-icon class="left" name="arrow-dropleft-circle"></ion-icon>
<ion-icon class="right" name="arrow-dropright-circle"></ion-icon>
<img class="character-img trump" src="images/trump.png" />
</div>
<div class="start-button-container">
<input class="start-button" type="button" value="START" />
</div>
</div>
//THE ABOVE PART OF THIS CODE IS REMOVED FROM THE DOM
</div>
This is the relevant code in the gameView.js file:
const popUpContainer = document.querySelector(".container");
export const renderUsersInput = () => {
let html = ` <div class="users-input animated slideInUp">
<div class="users-name">
<input class="users-name-input" type="text" name="Name" placeholder="Enter Name" required>
</div>
<div class="select-character-text">
<p>Select Character</p>
</div>
<div class="character-select">
<ion-icon class="left" name="arrow-dropleft-circle"></ion-icon>
<ion-icon class="right" name="arrow-dropright-circle"></ion-icon>
<img class="character-img trump" src="images/trump.png">
</div>
<div class="start-button-container">
<input class="start-button" type="button" value="START">
</div>
</div> `;
popUpContainer.insertAdjacentHTML("beforeend", html);
};
export const removeUsersInput = () => {
const usersInput = document.querySelector(".users-input");
usersInput.parentElement.removeChild(usersInput);
};
The removeUsersInput method above is called within the main Controller on my app (index.js):
const ctrlStartGame = () => {
gameView.removeUsersInput();
};
This is attached to an event listener:
base.elements.startButton.addEventListener("click", ctrlStartGame);
the renderUsersInput method is attached to this event listener:
base.elements.leaderBoardContainer.addEventListener("click", (e) => {
const newElements = base.getNewElements();
if(e.target === newElements.playAgainBtn) {
gameView.removeLeaderBoard();
gameView.renderUsersInput();
}
Related
I am creating a clone of the Netflix web app. I am currently developing the landing page. I have included my code below. This is one of the few different ways I have attempted structuring this page.
The layout currently is appearing how I want it to look, however the "main-slice__language-button" and the "main-slice__signin-button" at the top of the page are not working – meaning nothing happens when I click the select dropdown, and the Sign In button is not appearing as clickable. Can anyone explain why it does not work this way and any suggestions for better alternatives?
screenshot of landing page
import backgroundImage from '../../images/mooshflix-background.jpeg';
import netflixLogo from '../../images/netflix-logo.png';
import './MainSlice.css';
const MainSlice = () => {
return (
<div className='main-slice-container'>
<img className='background-image' src={backgroundImage} alt='mooshflix background' />
<div className='header'>
<img className='main-slice__logo' src={netflixLogo} alt='' />
<div className='main-slice__header-buttons'>
<select className='main-slice__language-button'>
<option>English</option>
<option>Spanish</option>
</select>
<button className='main-slice__signin-button'>Sign In</button>
</div>
</div>
<div className='main-slice__text-container'>
<h1 className='main-slice__title'>Unlimited movies, TV shows, and more.</h1>
<h2 className='main-slice__subtitle'>Watch anywhere. Cancel anytime.</h2>
<div className='main-slice__email-form-container'>
<h3 className='email-form-title'>Ready to watch? Enter your email to create or restart your membership.</h3>
<form>
<input placeholder='Email Address' ></input>
<button className='main-slice__email-form-button'>Get Started ></button>
</form>
</div>
</div>
</div>
)
}
export default MainSlice;```
because you DID NOT do anything, what event did u call for that button? you have to add some event listeners like onClick to your btn, like below:
const onStart = () => {
DO STH WHAT YOU WANT
}
<button className='main-slice__email-form-button' onClick={onStart}>
Get Started
</button>
I have simple modal window with textarea:
<div class="box-modal" id="product_modal">
<div class="box-modal_close arcticmodal-close"><img id="closePopupImage" src="/images/icons/popup_icon_close.png"></div>
<div id="product_fields">
<span class="product_label">{'TEXT_PRODUCT_NAME'|tr}:</span>
<input type="text" class="product_name">
<span>{'TEXT_PRODUCT_PRICE'|tr}:</span>
<input type="text" class="product_price">
<span>{'TEXT_PRODUCT_AMOUNT'|tr}:</span>
<input type="text" class="product_amount">
<br>
<span class="product_label pr_comment">{'TEXT_PRODUCT_COMMENT'|tr}:</span>
<textarea id="product_comment" class="product_comment"></textarea>
<img class="add_one_more" src="/images/icons/add_button.png" title="{'TEXT_ADD_ONE_MORE'|tr}">
</div>
</div>
I have table with button with class .add_products_btn.
My js:
function makeTinyMceEditor() {
tinymce.init({
selector: "#product_comment",
plugins: "link"
});
}
$(".add_products_btn").click(function () {
$("#product_modal").arcticmodal();
makeTinyMceEditor();
});
So when I click in button in first time my tinymce works fine. But when I click on the second button my tinymce doesn't work (think because textarea's ids are the same every time when I click on the button).
How can I remove old id instanse from editor for use them again?
Thanks.
You need to use the remove() API to detach TinyMCE from the DOM before you close your Modal window. You can then use init() again when the modal is recreated.
https://www.tinymce.com/docs/api/tinymce/root_tinymce/#remove
I am trying to trigger an event with a button that takes text from a textarea and sends it to a panel using the Bootstrap Framework (v.3.3.7). Currently trying to do this using an event listener in Javascript rather than assigning an ‘onclick’ value for the button.
HTML:
<div class="container-fluid">
<div class="row">
<!-- Panel where text will be appended to -->
<div id="mainChatBox" class="panel-body" style="height:435px; overflow-y:scroll"></div>
<!-- Textarea and button -->
<div class="panel panel-footer" style="height:40px">
<div class="form-group col-md-10 col-lg-10">
<input type="text" placeholder="Type your message here" class="form-control" id="messageBar" />
</div>
<div class="input-group-btn col-md-2 col-lg-2">
<button id="sendMessageButton" class="btn btn-default">Send</button>
</div>
</div>
</div>
</div>
Javascript
var sendMessageButton = document.querySelector('#sendMessageButton');
var messageBar = document.querySelector('#messageBar');
var mainChatBox = document.querySelector('#mainChatBox');
sendMessageButton.addEventListener("click", function (event) {
var message = messageBar.value;
mainChatBox.innerHTML += message + "<br />";
});
I tried debugging by using this code and another version where I instead assign the button an ‘onclick’ value and then keep the function for it.
Here is a link to a reddit post with that version of code where I tried to find a solution with assigning an ‘onclick’ value to the button instead of using an EventListener.
Reddit post link
I need to know why when the event is triggered by the button that the text will not be appended to the mainChatBox when using either the method with the 'onclick' value assignation to the "button" tag for sendMessageButton, or the EventListener in the Javascript.
I am creating an app using knockout and jquery. There are user generated contents which a user can edit and save. I have a save button which is disabled and gets enabled only when new character is added to the editable div.
Problem:
Save button gets activated for all divs. I want only the respective button to get enabled and remaining should stay in disabled state.
HTML:
<div data-bind="foreach: $root.goals">
<div class="ui padded segment mainCard brdR-S" data-bind="attr:{id:Title()}">
<div>
<div>
<div contenteditable="true" class="heading pdM-TB wordwrap" data-bind="attr:{href:'#'+Title()}, editableText: Title, event: { keyup: $root.ShowButtons }" id="goalTitle">
</div>
<div class="mgXl-T pdM-TB">
<button class="ui disabled tiny primary button" id="btnSave" data-bind="click: $root.putGoal">
<i class="refresh icon"></i>Save
</button>
</div>
</div>
</div>
</div>
Jquery
self.ShowButtons = function (data, e) {
$('.button').removeClass('disabled')
};
The code:
post_page.js:
Template.postPage.events({
// Updating a post
'submit form': function(e) {
e.preventDefault();
var post = {
title: $(e.target).find('[name=title]').val(),
content: $(e.target).find('[name=content]').val()
};
Posts.update(this._id, {$set: post});
},
'click .move-up': function(e) {
// Moving up a post
e.preventDefault();
var prevPost = Posts.findOne({position: this.position - 1});
if (prevPost) {
Posts.update(prevPost._id, {$set: {position: prevPost.position + 1}});
Posts.update(this._id, {$set: {position: this.position - 1}});
}
},
(...)
Template.postPage.rendered = function() {
// Plugin to turn the text area into a contenteditable div
var editor;
$(function() {
editor = new Simditor({
textarea: $("#input-content"),
placeholder: "...",
pasteImage: true,
toolbar: ["title", "bold", "italic", "underline", "link", "image", "indent", "outdent"],
upload: {
url: "/upload"
}
});
post_page.html:
<template name="postPage">
<div class="posts">
<div class="post">
<div class="post-content">
<span>title: {{title}}, position: {{position}}</span>
<a class="move-up" href="javascript:;">Move Up</a>
<a class="move-down" href="javascript:;">Move Down</a>
See Post
<a class="save-file" href="javascript:;">Save Post</a>
</div>
</div>
</div>
<form class="form" role="form">
<div class="form-group">
<label for="exampleInputEmail1">Title</label>
<input name="title" type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email" value="{{title}}">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Content</label>
<textarea name="content" class="form-control" rows="3">{{content}}</textarea>
</div>
<button type="submit" class="btn btn-default submit">Submit</button> </form> </template>
Is a single page app and everything works but for some reason the content of the contenteditable div disappears if I move up a post that isn't the one currently being displayed (the content in textarea remains and it comes back if I re-render the page):
What could be causing this? How to fix it?
Moving the post up/down causes the template to re-render completely and I suspect that because the simditor expects the DOM to persist, it either doesn't re-run on rendered or runs before Meteor's preserve-inputs package has repopulated the textarea.
You can try to work around the problem (until Meteor gets the Blaze templating engine up) by wrapping your re-rendering sensitive area (at least the textarea and possibly the complete DOM generated by simditor) in {{#constant}}. If you know the exact DOM elements you want to preserve, then you can also use preserve to prevent them from being re-rendered.