Develop Reference

Typescript error message ',' expected.ts(1005) [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 months ago.
Improve this question
I keep getting the error message ',' expected.ts(1005) when trying to dynamically render a modal on Typescript. I'm almost certainly missing a closing curly bracket somewhere but cant figure out where.
`<div class="modalWrap">
<h2 class="modalHeader">Shop The Look</h2>
<div class="modalContent">${object.map((el) =>
`<div class="prodDetails">
<img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
<p class="prodName">${el.name}</p>
<p class="prodPrice">${el.price.value}</p>
<div class = "selectWrapper">
<div class="selectNumber">
<div class="numberWrapper">
${el.sizeOptions
.map(
(option) => `
<p class="selectSize" >${option.value}</p>`
)
.join('')}
</div>
</div>
</div>
</div>
</div>
)}
</div>`
Any help would be appreciated!

Less of an answer than a rant with good intentions.
This code is illegible, and because of that, finding the missing backtick is extremely tedious. Here's how to make it less awful. * Edited for brevity.
Step 1: Indent. We're not savages.
This step alone is enough to resolve the issue.
`
<div class="modalWrap">
<h2 class="modalHeader">Shop The Look</h2>
<div class="modalContent">
${object.map(el => `
<div class="prodDetails">
<img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
<p class="prodName">${el.name}</p>
<p class="prodPrice">${el.price.value}</p>
<div class = "selectWrapper">
<div class="selectNumber">
<div class="numberWrapper">
${el.sizeOptions.map(option => `
<p class="selectSize" >${option.value}</p>
`).join('\n')}
</div>
</div>
</div>
</div>
`).join('\n')}
</div>
</div>
`
Step 2: Don't do so much at once. Let your code breathe.
There are two pseudo-"components" to pull out, both functions to map. This clarifies their intent and reduces the surface area of the mainline code.
The inner one is simple:
const makeOption = opt => `<p class="selectSize">${option.value}</p>`
The outer one is incrementally more complex, but by maintaining indentation, adding some clarifying whitespace, and using the inner "component", it's much cleaner:
const makeProdDetail = el => `
<div class="prodDetails">
<img class="prodImg" alt="prodImage" src=${el.primaryImage.url}></img>
<p class="prodName">${el.name}</p>
<p class="prodPrice">${el.price.value}</p>
<div class="selectWrapper">
<div class="selectNumber">
<div class="numberWrapper">
${el.sizeOptions.map(makeOption).join('\n')}
</div>
</div>
</div>
</div>
`
The smaller the functional chunks are the easier spotting and mitigating mistakes is. It's also easier to modify/update/parameterize/etc.
Step 3: Tie it all together
Now the overall component is wee:
`
<div class="modalWrap">
<h2 class="modalHeader">Shop The Look</h2>
<div class="modalContent">
${object.map(makeProdDetail).join('\n')}
</div>
</div>
`
All untested, but roughly correct.
Step 4: Give things meaningful names.
object => products
el => product

You didn't close the string literal that was being mapped from object:
const test = `<div class="modalWrap">
<h2 class="modalHeader">Shop The Look</h2>
<div class="modalContent">${object.map(
(el) =>
`<div class="prodDetails">
<img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
<p class="prodName">${el.name}</p>
<p class="prodPrice">${el.price.value}</p>
<div class = "selectWrapper">
<div class="selectNumber">
<div class="numberWrapper">
${el.sizeOptions
.map(
(option) => `
<p class="selectSize" >${option.value}</p>`
)
.join('')}
</div>
</div>
</div>
</div>
</div>`
)}
</div>`;

Javascript when button is clicked is being colored while the other buttons lose their color

I have an rate app box,
I want the user to rate the app from 1-5 by clicking one of five buttons.
The button that was clicked should have color, all the others none. So if he clicked first on 3 and then 2, when clicking on 2 the color from the 3 button will be removed so only the last button was clicked (in this case 2) will have a color.
I DID manage to do it using button array, but i know for sure there is shorter way that isnt involved button array, only by code inside the function.
html:
<body>
<div class="container">
<div class="img-container">
<img src="./images/icon-star.svg" alt="" class="img-star">
</div>
<div class="content">
<h1>How did we do?</h1>
<p id="content-paragraph">
Please let us know how we did with your support request. All feedback is appreciated
to help us improve our offering!
</p>
</div>
<div class="buttons-container">
<button value = 1 class="choose " id="btn-one" onclick="paintBtn(this)">1</button>
<button value = 2 class="choose" id="btn-two" onclick="paintBtn(this)">2</button>
<button value = 3 class="choose" id="btn-three" onclick="paintBtn(this)">3</button>
<button value = 4 class="choose" id="btn-four" onclick="paintBtn(this)">4</button>
<button value = 5 class="choose" id="btn-five" onclick="paintBtn(this)">5</button>
</div>
<form action="thankYou.html">
<button id="submit">SUBMIT</button>
</form>
<script src="index.js"></script>
</body
js:
const buttonOne = document.getElementById("btn-one")
const buttonTwo = document.getElementById("btn-two")
const buttonThree = document.getElementById("btn-three")
const buttonFour = document.getElementById("btn-four")
const buttonFive = document.getElementById("btn-five")
const buttonsArr = [buttonOne, buttonTwo, buttonThree, buttonFour, buttonFive]
function paintBtn(button) {
buttonsArr.map(btn => btn.classList.remove("btn-clicked"))
button.classList.add("btn-clicked")
}

The shorter way of doing and not having to pass every button inside an array would be to do a document.querySelectorAll(".choose") and with that way you would be able to access the NodeList of matching elements to your class.
You can examine it just like any array. If the array is empty (that is, its length property is 0), then no matches would be found.
Otherwise, you can use standard array notation to access the contents of the list. You can use any common looping statement, such as a forEach statement.
It works just fine as in the attached example.
function paintBtn(newClickedButton) {
// clear styling from buttons
let buttons = document.querySelectorAll(".choose");
buttons.forEach(function(button){
button.classList.remove("btn-clicked");
});
newClickedButton.classList.add("btn-clicked");
}
.btn-clicked{
background-color: red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="img-container">
<img src="./images/icon-star.svg" alt="" class="img-star">
</div>
<div class="content">
<h1>How did we do?</h1>
<p id="content-paragraph">
Please let us know how we did with your support request. All feedback is appreciated
to help us improve our offering!
</p>
</div>
<div class="buttons-container">
<button value = 1 class=" choose" id="btn-one" onclick="paintBtn(this)">1</button>
<button value = 2 class=" choose" id="btn-two" onclick="paintBtn(this)">2</button>
<button value = 3 class=" choose" id="btn-three" onclick="paintBtn(this)">3</button>
<button value = 4 class=" choose" id="btn-four" onclick="paintBtn(this)">4</button>
<button value = 5 class=" choose" id="btn-five" onclick="paintBtn(this)">5</button>
</div>
<form action="thankYou.html">
<button id="submit">SUBMIT</button>
</form>
<script src="index.js"></script>
</body>

use onclick functionallaity to solve this problem okay

You can use instead document.getElementsByClassName to search for the button that is currently clicked instead of searching and traversing through all of the buttons:
function paintBtn(newClickedButton) {
const clickedButtonClassName = "btn-clicked";
const clickedButton = document.getElementsByClassName(clickedButtonClassName)[0];
clickedButton.remove(clickedButtonClassName);
newClickedButton.classList.add(clickedButtonClassName);
}

Multiple button click animation jQuery

I am beginner so please don't make too much fun of me, but I am having issues trying to get separate buttons to react when clicked. The current code that I have written will dim the all of the buttons when I click on only one of them. The problem is that I have 4 buttons and I want them to all be independent, but I don't want to type the same code 4 times for each of them.
Here is my HTML:
<div type="button" id="green" class="btn green">
</div>
<div type="button" id="red" class="btn red">
</div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow">
</div>
<div type="button" id="blue" class="btn blue">
</div>
</div>
Here is my jQuery code:
let buttonDim = function(){
$(".btn").on("click", function(){
$(".btn").addClass("pressed");
setTimeout(function(){
$(".btn").removeClass("pressed");
}, 100);
});
}
buttonDim();
I am aware that I have probably written the code ridiculously longer than it needs to be, but I am still learning.
Any help would be greatly appreciated, thank you.

Try js buttonDim() like this
$(".btn").on("click", function(){
var button=$(this);
button.addClass("pressed");
setTimeout(function()
{
button.removeClass('pressed');
}, 2000);
});

Text not fully redrawing when I toggle between templates

On my AngularJS app I have a view that allows me to toggle between type of insurance cover and it works fine. However on iPhone in particular (Chrome & Safari), the text kind of scrambles when I toggle between the prices. To be very clear about it, it's only the top few pixels and those pixels generally belong to the price toggled away from, so it's like the page isn't properly redrawing it. This issue then goes away if I do anything in the Dev tools. Any help is appreciated here.
EDIT: This appears to only happen when I select an option that updates the value displayed, not when it switched to a different piece of template.
Here's a screenshot
And a slightly stripped down version of the template in question:
<div class="row quote-tab-container">
<div class="col">
<div class="quote__tab">
<button ng-click="selectedCoverType = 'Comp'; setCoverDetails()" class="quote__tab__button">
Comprehensive
<div class="active-selection" ng-show="selectedCoverType === 'Comp'"></div>
</button>
<button ng-click="selectedCoverType = 'Tpft'; setCoverDetails()" class="quote__tab__button">
Third Party,<br />Fire & Theft
<div class="active-selection-tpft" ng-show="selectedCoverType === 'Tpft'"></div>
</button>
</div>
</div>
</div>
<div class="quote-details row">
<div class="col">
<div class="answer--radio">
<input ng-click="paymentType = 'CC'" type="radio" ng-checked="paymentType == 'CC'" id="singlePayment" name="payment-type">
<label for="singlePayment">Single Payment</label>
</div>
<div class="answer--radio answer--radio--right">
<input ng-click="paymentType = 'DD'" type="radio" ng-checked="paymentType == 'DD'" id="monthlyPayments" name="payment-type">
<label for="monthlyPayments">Monthly Payments</label>
</div>
<section class="selected-product answer--checkbox" ng-show="paymentType == 'CC'">
<div class="your-online-price">
Your online price is
</div>
<div class="selected-product__price">
{{totalPremium | signedCurrencyFilter}}
</div>
<div class="selected-product__includes">
Price includes online discount of {{onlineDiscount | signedCurrencyFilter}}
</div>
</section>
<section class="selected-product answer--checkbox" ng-show="paymentType == 'DD'">
<div class="your-online-price">
Your online price is
</div>
<div class="selected-product__price">
{{instalmentAmount | signedCurrencyFilter}}
</div>
<div class="selected-product__includes">
Price includes online discount of {{onlineDiscount | signedCurrencyFilter}}
</div>
</section>
</div>
</div>

So because the browser would correct this glitch whenever the screen resized or had to redraw I had to force a redraw any time these options were selected. The best way to do this seemed to be to clone the element and replace the original with the clone in order to force a redraw, this was enclosed in a timeout in order to send this to the end of the execution queue.
This answer helped with this: https://stackoverflow.com/a/8840703/1999035
var n = document.createTextNode(' ');
var opacity = element.style.opacity;
element.appendChild(n);
element.style.opacity = '0.5';
setTimeout(function(){
element.style.display = opacity;
n.parentNode.removeChild(n);
}, 20);
My edit of the proposed solution is to use the opacity property rather than display, because the display change causes a jitter/glitch/flash that looks really bad.Opacity just causes a slight fade.

jQuery selecting div issue [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have encountered a genuine problem that I cannot solve :x
I have a function that adds class "selected" to div which I click and changes inner html of button to ID of clicked div. However when I double click same div it removes selected class and button's inner html is not changing.
I wish if you could help me make button inner HTML set to something else when unselecting or make it impossible to unselect once selected div.
Here's my code:
$(function(){
$(".panel-kol").click(function() {
var mid = $(this).attr('mid');
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
$('.selected').removeClass('selected');
$(this).addClass('selected');
}
document.getElementById("id").innerHTML = mid;
});
});
HTML is PHP-generated so I post one example from page' source
<div class="col-md-3">
<div class="panel panel-kol" mid="2">
<div class="panel-body profile white">
<div class="profile-image"><img src="../assets/images/users/female.svg" alt="Osoba"></div>
<div class="profile-data">
<div class="profile-data-name" style="font-weight: bold;">Agata Jacynów</div>
<div class="profile-data-title">Lekarz</div>
</div>
</div>
<div class="panel-body">
<div class="contact-info text-center" style="margin-top: -20px;">
<p>
<small>Telefon komórkowy</small>
<br/>666333999
</p>
<p>
<small>Od - Do</small>
</p>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" value="07:00:00"/>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" value="14:00:00"/>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
That's button I want to change:
<div class="col-md-3">
<button id="id" class="btn btn-block" style="font-weight: bold; cursor: default;">ID</button>
</div>
Any help would be greatly appreciated!

Just place it in the exisintng if and set it to whatever wanted whenever you unselect the div.
$(function() {
$(".panel-kol").click(function() {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
$("#id").text("ID"); // change the text here as you like
}
else {
$('.selected').removeClass('selected');
$(this).addClass('selected');
$("#id").text($(this).attr('mid'));
}
});
});

You could try catching double click event and prevent starting the previous function.
$(".panel-kol").on("dblclick", function(e){
e.preventDefault();
return;
});