We Keep Coding

how to pass a string in an Onclick event

I'm trying to add an anchor automatically and this is what i've done
" <a id='" + x.NomFic + "' onclick='TransfererFica( " +x.Idtran +" , "+ x.NumVdr + " , '" + x.NomFic + "' )'; </a>"
but the problem that x.NomFic is a string so when i click on the anchor it raises an error, so my question is how can i pass a param string , i've tried to put an integer just to check if my code works and it did, and when i change x.NomFic to accept string the code didn't work, any ideas ?

You need to use a escape character "\" in your code
" <a id='" + x.NomFic + "' onclick='TransfererFica( " + x.Idtran + " , "
+ x.NumVdr + " , \"" + x.NomFic + "\" )'; </a>"
More reading about escape character
https://csharpindepth.com/articles/Strings

Replace/Toggle ng-click event once clicked

I am building a web app that allows users to mark which episode of a show they have watched. On load it has a ng-click event called markEpisode(). Once that is clicked, I want the ng-click event to change to unmarkEpisode().
Currently I have it removing the ng-click attribute and then re-adding a new one. But doesn't seem to work.
// Unmark Episode As Watched
$scope.unmarkEpisode = function(episode_number, season_number, id) {
$http.post('/api/show/' + id + '/season/' + season_number + '/episode/' + episode_number + '/unwatch')
.then(response => {
$('.episode-artwork[data-episode-season="' + episode_number + season_number + '"]').removeAttr('ng-click').attr('ng-click', 'markEpisode(' + episode_number + "," + season_number + "," + id + ')');
});
};
This is how I add the episodes in
$('#episodes .row').append($compile('<div class="col-sm-3">' +
'<div data-episode-season="' + response.data.episodes[i].episode_number + response.data.episodes[i].season_number + '" class="episode-artwork" ng-click="markEpisode(' + response.data.episodes[i].episode_number + "," + season_number + "," + id + ')" style="background-image: url(' + imageURL + ')">' +
'</div>' +
'<p class="episode-name">' + response.data.episodes[i].episode_number + '. ' + response.data.episodes[i].name + '</p>' +
'<p class="episode-text">' + response.data.episodes[i].overview + '</p></div>')($scope));

It would be good to have two links or buttons: one for mark, one for unmark.
Each button should have an *ngIf="item.isMarked" or *ngIf="!item.isMarked".
I think that it's not a good idea to mix angular and jquery. If you are working with angular, there is no need to manipulate the dom via jQuery.

Javascript method argument escape

The below span tag containing an onclick event is not working
var test="<span onClick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />"
the above escaped string has some problems with the method call.
How can I fix it?

If you're creating this in JavaScript to create an element, then the first single-quote needs to be escaped.
function gotoNode(name, xaxis, yaxis, detail, status) {
alert("name = " + name + "\r\nxaxis = " + xaxis + "\r\nyaxis = " + yaxis + "\r\ndetail = " + detail + "\r\nstatus = " + status);
}
var result = { name: "name", xaxis: "xaxis", yaxis: "yaxis", detail: "detail", status: "status" };
var htmlText = '<input value="Button" type="button" onclick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />';
$("#lonely").append(htmlText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lonely"></div>
Generally speaking, whatever quote type you begin with (out of ' or "), you need to escape the same type that you want to use within the string and not escape the same type to terminate the string. You can leave the other type without escapes.
For your edited version, this should work if you want those result variables to be replaced with their values.
var test = "<span onclick=\"gotoNode('" + result.name + "','" + result.xaxis + "','" + result.yaxis + "','" + result.detail + "','" + result.status + "')\" />";

Do you use php to generate the output?
Then you should try
echo "<input type=\"button\" onClick=\"gotoNode(\" + result.name + \",\" +
result.xaxis + \",\" + result.yaxis + \",\" + result.detail + \",\" +
result.status + \")\" />";

Javascript functions not working in Chrome browser after PostBack

I am facing a wiered issue with Chrome browser.
Its an online donation form.
User has a choice to contribute different amounts.
This form contains few radio buttons along with option to provide other donation amount also.
This form works fine in IE and firefox,
But not working properly on Chrome.
The issue seems to be happening only on a postback.
On postback javascript functions "selectAmount" and "selectOtherAmount" functions are not working.
Basically on click event of the radio buttons I am calling the above simple js functions.
Looks like Chrome is treating this as Cross Site Scripting and blocking.
In chrome debugger shows the following error on Postback.
"The XSS Auditor refused to execute a script in 'myform.aspx?id=12345'
because its source code was found within the request.
The auditor was enabled as the server sent neither an 'X-XSS-Protection not 'Content-Security-Policy' header."
here is my code
if (item[0] == "__OTHER__")
{
if (selectedValue == "__OTHER__")
{
amountLevels.Append("<tr><td><input type=\"radio\" name=\"levelamount-" + donationOption + "\" id=\"rbAmountOther-" + donationOption + "\" value=\"" + defaultOtherAmount.ToString("0.00") + "\" onclick=\"selectOtherAmount(this.value,'" + donationOption + "');\" checked=\"checked\" /></td>");
}
else
{
amountLevels.Append("<tr><td><input type=\"radio\" name=\"levelamount-" + donationOption + "\" id=\"rbAmountOther-" + donationOption + "\" value=\"" + defaultOtherAmount.ToString("0.00") + "\" onclick=\"selectOtherAmount(this.value,'" + donationOption + "'); \" /></td>");
}
amountLevels.Append("<td><input type=\"text\" id=\"txtAmountOther\" value=\"" + defaultOtherAmount.ToString("0.00") + "\" " + disabled + " onchange=\"selectOtherAmount(this.value,'" + donationOption + "');\" onkeypress=\"return isValidAmount(event);\" style=\"width:70px;\" />" + item[1] + "</td></tr>");
}
else if (string.Compare(selectedValue, item[0], true) == 0)
{
amountLevels.Append("<tr><td><input type=\"radio\" id=\"rdbAmount-" + donationOption + index + "\" name=\"levelamount-" + donationOption + "\" value=\"" + amount.ToString("0.00") + "\" checked=\"checked\" onclick=\"selectAmount(this.value,'" + donationOption + "');\"></td><td> " + amountLabel + "</td></tr>");
selectedAmount = amount.ToString("0.00");
}
else
{
amountLevels.Append("<tr><td><input type=\"radio\" id=\"rdbAmount-" + donationOption + index + "\" name=\"levelamount-" + donationOption + "\" value=\"" + amount.ToString("0.00") + "\" onclick=\"selectAmount(this.value,'" + donationOption + "');\"></td><td> " + amountLabel + "</td></tr>");
}

This "feature" can be disabled by sending the non-standard HTTP header X-XSS-Protection on the affected page.
X-XSS-Protection: 0
See this post: Refused to execute a JavaScript script. Source code of script found within request

onclick event and json data not meshing together

I've got a silly error which I cant seem to fix some how. I'm simply looking to do the following:
onclick="CreatePro('x','y','z')"
I basically want to pass text to the CreatePro function. Now my values of x,y and z are json data. As such here is what I am using for the javascript:
var Provision = "'" + data[i].ProvisionID + "'";
var Title = "'" + data[i].Title + "'";
var Author = "'" + data[i].Author + "'";
var Edition = "'" + data[i].Edition + "'";
var Publisher = "'" + data[i].Publisher+ "'";
var ISBN = "'" + data[i].ISBN + "'";
var UserID = "'" +data[i].UserID + "'";
var Price = "'" + data[i].Price+ "'";
var Condition = "'" +data[i].Condition +"'";
Row = Row + "<td><input type='button' onclick='CreatePro(" + Provision + "," + Title+ "," + Author + "," + Edition + "," + Publisher +"," + ISBN + ","+ UserID + ","+ Price + "," + Condition + ")' value='Create'></td></tr>";
console.log(Row);
Now when I use console.log I get the following:
<td><input type='button' onclick='CreatePro('19','dfjeryj','ertj','0','tj','0000000000000','4','0','0')' value='Create'></td>
But when I inspect the element I have :
<input type="button" onclick="CreatePro(" 19','dfjeryj','ertj','0','tj','0000000000000','4','0','0')'="" value="Create">
The problem is suspect is the " on the above line. But I dont know why this is happening? As from the console log. My quotes seem to match up. So I'm not sure why the browser is mixing them up? Perhaps I've gone wrong somewhere? (Frankly I can;t see the error). Every time I click the create button the event doesn't call my CreatePro function. I'm really not sure what I'm doing wrong or perhaps a better way of doing what I'm doing

You have got your quotes wrong. It should be:
Row = Row + "<td><input type='button' onclick=\"CreatePro('" + Provision + "','" + Title+ "','" + Author + "','" + Edition + "','" + Publisher +"','" + ISBN + "','"+ UserID + "','"+ Price + "','" + Condition + "')\" value='Create'></td></tr>";