We Keep Coding

what happen when you use onclick={} instead of onclick=""?

<script>
function hello(val)
{
alert(val);
}
</script>
<button onclick="hello('hello')"">hello</p> <!-- works and prints hello -->
<button onclick={hello()}>hello 2</button> <!-- works and prints undefined -->
<button onclick={hello("hello3")}> hello 3</button> <!--also works even though intellisence put a squigly red line under the first quote "-->
<button onclick={hello("does not work")}> hello 3</button> <!-- does not work, error is show in console Invalid or unexpected token -->
I know that inline js should be treated carefully, im trying to explain that to other people with this example, however i dont what is happening underneath.
My explnation is that if you change something that is expected you would get undesired results, however i feel that my explanation is superficial and not enough, so could someone explain what is happening underneath that is casuing this wierd behaviour?

If it is only about HTML and no framework is involved, then what you observe is partially explained in HTML attribute with/without quotes
An attribute value can either be enclosed in " or ' or consist of a value that is not enclosed by quotes, and such a value must not contain spaces.
So <button onclick={hello()}>hello 2</button> it is equivalent to <button onclick="{hello()}">hello 2</button> and onclick has the value {hello()}, which is valid JS (the hello() is just within a block).
For <button onclick={hello("does not work")}> the value ends at the first space so it is equivalent to <button onclick="{hello("does" not="" work")}="">, there onclick has the value {hello("does and that's not valid JS.

HTML tags inside string literal are not being passed to JS method correctly

So I have read from a JSON file. And I can easily get the name value and photo_url value and some of the bio for each "person".
https://codepen.io/lpmurray16/pen/ExvpQgP
This is where the JSON is:
https://bensdemo.prod.equisolve-dev.com/api/v1/eq-test
So in the JavaScript file found within the codepen linked above (sorry for the formatting it does that every time I save...), but lines 23-40 is a function that gets called onClick for the class "card" and the button tag in these lines below... I pass the arguments into this function as ${person.arg} and you can see it works for some of the people because when you click on the first three people it opens the modal with the correct information in every spot. But in one of the person.bio within the JSON it breaks due to a delimiter on an anchor tag like this --> ".
Am I missing something obvious? This is as close as I get without ripping my hair out. And the error message is just Uncaught "SyntaxError: Invalid or unexpected token" on line 1 of the HTML file. Which doesn't help at all? Am I missing a closing tag or something?
document.getElementById("cards").innerHTML = `
${allData.map(function (person) {
let regex = /[_\*#"]/g;
return `
<div class="card flex-col"
onClick="changeModalContent('${person.name.replace(regex,"")}',
'${person.title}','${person.photo_url}', '${person.bio}'); modal.open();">
<div class="card_top">
<img class="prof_pic" src="${person.photo_url}"
alt="${person.name.replace(regex, "")}"/>
</div>
<div class="card_bottom flex-col">
<h3 class="prof_name">${person.name.replace(regex, "")}</h3>
<p class="prof_title">${person.title}</p>
<button class="view_button"
onClick="changeModalContent('${person.name.replace(regex,"")}',
'${person.title}', '${person.photo_url}', '${person.bio}');
modal.open();">View Bio
</button>
</div>
</div>
`;
}).join("")}
`;

The problem is not the double quotes in the anchor tag, it's the \r\n in your source json. You can tell because the entry for Sam Darnold does not have any "s in it. You'll need to sanitize the carriage return and line-feeds out first.
Update your regex to be:
let regex = /[_\*#"\r\n]/g;
Then replace both instances of:
${person.bio}
with:
${person.bio.replace(regex, "")}
Now your code will render correctly as you can see in the working codepen.

How to toggle font awesome icon via class (pure CSS)

I'm working on a small project which is going to have a light/dark mode toggle but I'm struggling to toggle the class on the tag.
So I'm using font awesome for the icons here is my code:
HTML:
<i class="fas fa-moon" id="toggle"></i>
JS:
function classToggle() {
document.getElementById("toggle").classList.toggle('fas fa-moon');
document.getElementById("toggle").classList.toggle('fas fa-sun');
}
document.querySelector('#toggle').addEventListener('click', classToggle);
the above code gave me the error:
InvalidCharacterError: The string contains invalid characters.
for the JS I have also tried:
function classToggle() {
this.classList.toggle('fas fa-moon');
this.classList.toggle('fas fa-sun');
}
document.querySelector('#toggle').addEventListener('click', classToggle);
but this doesn't work either and gave me the error:
TypeError: undefined is not an object (evaluating 'this.classList.toggle')
I got the code above from https://codepen.io/jacknifey/pen/XWJaKZr and it worked perfectly, but as soon as I changed the class names to the font awesome ones it stoped working. Maybe it's something to do with the SVG's. If so can anyone suggest an alternative method.
Stay Safe
Thanks, Jamie :)

You don't need to put fas into classList.toggle method.
function classToggle() {
document.getElementById("toggle").classList.toggle('fa-moon');
document.getElementById("toggle").classList.toggle('fa-sun');
}
document.querySelector('#toggle').addEventListener('click', classToggle);
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<i class="fas fa-moon" id="toggle"></i>

New Line character in title attribute does not work in tooltip

I have an html form where I need to add new line character in to the title attribute of the anchor tag. I found a few solutions online but none of them work in my code.
I tried adding
\n
<br>
not sure what is missing. Is it because of data-toggle that is blocking from breaking the title attribute?
$(document).ready(function () {
$('form').attr('novalidate', true);
$('[data-toggle="tooltip"]').tooltip();
<a class="helptext fa fa-question-circle" data-toggle="tooltip" title="Additional information -
 You can provide further information here to for your
 application to issue a new card.
 Ensure a maximum of 200 characters
 is entered – including spaces."></a>

Setting the title with JavaScript works for me.
document.getElementById('asdf').title = 'line1\nline2';

A popover would be a better solution, but it is possible to achieve this functionality in browser:
$(document).ready(function () {
$('form').attr('novalidate', true);
//$('[data-toggle="tooltip"]').tooltip();
$('.helptext')[0].title = "I like\nlines"
// you can also use $('.helptext').attr("title",decodeURI("I like%0A to%0Ause%0Alines"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="helptext fa fa-question-circle" data-toggle="tooltip" href="#" title="Additional information -
 You can provide further information here to for your
 application to issue a new card.
 Ensure a maximum of 200 characters
 is entered – including spaces.">test</a>

Uncaught SyntaxError: Unexpected token ILLEGAL onclick mvc

I know that this is question has been asked many times before but I can't find any similar case like mine.
I want to call a javascript function on an input type button control I'm doing it like so:
<input type="button" onclick="FormatApplicationMessage(#application.StatusID, '#application.IssueMessage')" class="fa fa-search fa-lg" />
but I always got this error:
Uncaught SyntaxError: Unexpected token ILLEGAL
This is the generated html :
<input type="button" onclick="FormatApplicationMessage(5, 'Please provide a copy of your CV')" class="fa fa-search fa-lg" />
I tried to do this:
<input type="button" onclick='FormatApplicationMessage(#application.StatusID, "#application.IssueMessage")' class="fa fa-search fa-lg" />
But I get the same error message
any hacks ?
EDIT
Here is FormatApplicationMessage implementation:
function FormatApplicationMessage(statusID, issueMsg) {
//declined
if (statusID == 4) {
$('#ApplicationMessageLabel').val("Message");
}
//Update Required
else if (statusID == 5) {
$('#ApplicationMessageLabel').val("Message");
}
//Approved
else if (statusID == 6) {
$('#ApplicationMessageLabel').val("Message");
}
$('#ApplicationMessage').show();
}

Here is what I think might go wrong:
FormatApplicationMessage is not defined as a function. Define this function with two parameters. And reference the script or define the function inline.
Make sure that in your view you can access #application and it contains your properties StatusID and IssueMessage
Make sure that #application is not part of your #Model or #ViewBag. If either is true use either #Model.application.XYZ or #ViewBag.application.XYZ
If all is defined, and you want to use #application inside parenthesis, use #(application.XYZ) otherwise the parser might get an error, so try:
<input type="button" onclick='FormatApplicationMessage(#(application.StatusID), "#(application.IssueMessage)")' class="fa fa-search fa-lg" />
See http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/ and look for Explicit Expression
EDIT
If #Infas is a C# class and you want to use this in JavaScript you must create the script inline in your view. You cannot use Razor #-syntax in a pure .js-file.

After days of investigation finally I found the problem. The problem was very silly and quite annoying
The rendered HTML was like so:
<i class="mywarning fa fa-warning (alias) fa-lg" onclick="FormatApplicationMessage(5,"Return Message
")"></i>
as you can see this part ")"></i> is rendered on the next line because the string contains endlines which for some reasons it isn't legal to do so.
So to solve the problem I'd just replaced endlines by '< br >' (you can replace it by whatever symbol you like) when calling FormatApplicationMessage for the second parameter. Inside FormatApplicationMessage I restored those '< br >' to "\n" then displayed it in a text area.
USEFUL THREADS:
1
2
3
4