Develop Reference

Add dynamic button with onclick functionality to cell

I'm trying to dynamically add a button with an onclick functionality to my table's cell but i seem to have a problem with my formatting.
My JS:
noteArrHelper = noteArr[i];
console.log(noteArrHelper);
cell2.innerHTML = "<button type=\"button\""+"onclick=deleteNote(\""+noteArrHelper+"\")"+">Delete";
cell2.className = "noteright";
And this is how it looks like in the browser:
<button type="button" "onclick="deleteNote("joyful="" test")"="">Delete</button>
But i want it to look like:
<button type="button" onclick="deleteNote("joyful test")">Delete</button>
I tried a few other ways of formatting but couldn't get it to work. Also the browser puts out the "joyful test" part correctly without any "=" between the words.

You can do so by simply changing third line in your JS code to the following:
cell2.innerHTML = "<button type=\"button\" onclick=\"deleteNote('"+noteArrHelper+"')\">Delete</button>";
Good luck :)

You can simply use Template literals (Template strings)
Live Demo:
//var
let noteArrHelper = 'joyful test'
//innerHTML
document.querySelector('#test').innerHTML = `<button type="button" onclick="deleteNote('${noteArrHelper}')">Delete</button>`;
//function
function deleteNote(str) {
console.log(str) //joyful test
}
<div id="test"></div>

U can use Template literals
cell2.innerHTML = `<button type="button" onclick=${deleteNote(noteArrHelper)} >Delete</button>`

You can try this mate
cell2.innerHTML = "<button type='button' onclick=\"deleteNote(\'" + noteArrHelper + "\')\">Delete</button>";

When you have to use quotes multiple time, then use single quotes and double quotes in your code
cell2.innerHTML = "<button type='button'onclick='deleteNote('+noteArrHelper+')'>Delete</button>";

Add text from a variable to a tweet

I am trying to tweet text I get from a function executing a getJSON command, the tweet button I created opens twitter but with no text, I want it to automatically "paste" the quote the webpage is currently displaying. My basic html code is the following:
<button id="quoteClick" type="button" class="btn btn-success btn-lg quoteButton text-center btn-block">Get Quote</button>
<div class="col-md-8 show boxed text-center"> Text </div>
<div class="col-md-5 text-center author"> auth
</div>
<a class="tw-button" href="https://twitter.com/intent/tweet/?text=" data-size="large" target="_blank">
<button type="twbutton" class="btn btn-primary">Tweet quote</button>
</a>
My JS:
$(document).ready(function() {
gQuote();
function gQuote() {
$.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en",
function(data) {
var Quote = data.quoteText;
var Author = data.quoteAuthor;
var quoteShow = ""
var quoteAuthor = ""
quoteShow += "<h3 class='text-center'>" + Quote + "</h3>"
quoteAuthor += "<h4 class='text-center'>" + Author + "</h4>"
$(".show").html(quoteShow);
$(".author").html(quoteAuthor);
});
};
$("#quoteClick").on("click",function() {
gQuote();
});
$(".tw-button").click(function(){
$(this).attr("href",'https://twitter.com/intent/tweet/?text='+ Quote);
});
});
I understand that the Quote variable was created within the previous function and I am not clear as to how I can "carry" it towards the twitter button.
I am using codepen so "target:_blank" is a must.

The Quote variable is local to the callback in the $.getJSON.
One (and the simplest) of the solutions is shifting the 'var Qoute' declaration to the callback of the $(document).ready callback, so that it is accessible to the '$(".tw-button").click' callback through the scope chain during the right hand search. Though, this is not very good for larger-scaled code.
$(document).ready(function() {
gQuote();
var Quote; //Declare variable here
function gQuote() {
$.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(data) {
Quote = data.quoteText; //Set it here
var Author = data.quoteAuthor;
var quoteShow = ""
var quoteAuthor = ""
quoteShow += "<h3 class='text-center'>" + Quote + "</h3>"
quoteAuthor += "<h4 class='text-center'>" + Author + "</h4>"
$(".show").html(quoteShow);
$(".author").html(quoteAuthor);
});
};
$("#quoteClick").on("click",function() {
gQuote();
});
$(".tw-button").click(function(){
$(this).attr("href",'https://twitter.com/intent/tweet/?text='+ Quote);
});
});

If I'm not mistaken all you need to do is declare your variables Quote and Author outside gQuote() function. Inside gQuote() you can assign them whatever you wish and pass their latest values to $(".tw-button").click() event. Make sure you got JSON object and parsed data from it right.
I made something similar as freecodecamp project. Have a look here if you have difficulties.

JavaScript if statement / displaying a button

I am trying to workout the following JavaScript if statement:
<script>
if ($crs_date2 != '0000-00-00'){
document.write('No other course date available');
} else {
document.write(<button class='btn btn-danger data-toggle='modal' id='actionButtonOrange'>$crs_date2</button>);
}
</script>
I am encountering two issues:
The button is not being displayed.
the function does not seem to be working as intended.
Essentially what would happen is that if no date is available (by default it displays 0000-00-00 if no date is available but it is not aesthetically pleasing), the JavaScript message appears.

You are missing delimiters around the string:
document.write("<button class='btn btn-danger data-toggle='modal' id='actionButtonOrange'>" + $crs_date2 + "</button>");

Calling a Javascript function with parameters from innerHTML

I'm writing html in Javascript using innerHTML, in one case, I'm appending a href tag like so :
txt.innerHTML += 'Read more';
where url is a string containing a url.
And the goToUrl function looks like as follows :
function goToUrl(urlToBrowse) {
window.open(urlToBrowse, "_blank");
}
But my onclick never gets called, can anyone see the problem? Cheers

try this
txt.innerHTML += "<a href='' id='rssLinks' onclick='alert(\"" + url + "\");'>Read more</a>";
//........................................................^............^
//.............................................................may needed
because call would look like goToUrl(http://google.com)
and that's a string so it has to be goToUrl("http://google.com")
EDIT 01/2020 - "New" way to add this parameter
Since ES6, you can write it with a Template-String
txt.innerHTML += `<a href='' id='rssLinks' onclick='goToUrl("${url}");'>Read more</a>`

Change to this:
onclick="goToUrl(' + url + '); return false;"
That will prevent the action of the browser.

You need to append onclick to your element txt.onclick="goToUrl(' + url + ');

Converting a string into a jquery element and appending it to the DOM

I'm trying to do what the title says with the following (admittedly terribly written) code:
$('.right').append($('<li class="btn log-out-button"><a data-method="delete" data-remote="true" format="json" href="' + data.log_out_path + '" class="standout-primary" rel="no-follow>Sign Out</a></li>
I can't for the life of me figure out what I'm doing wrong with it, but all that shows up is the following HTML:
<li class="btn log-out-button></li>
Why is it ignoring the inner HTML I wrote in my string?

You have this code
$('.right').append($('<li class="btn log-out-button"><a data-method="delete" data-remote="true" format="json" href="' + data.log_out_path + '" class="standout-primary" rel="no-follow>Sign Out</a></li>
Missing barces/quotes, instead try this clean approach
var link = $('<a/>', {
'data-method':'delete',
'data-remote':'true',
'format':'json',
'href': data.log_out_path, // make sure you have 'data' in current scope
'class':'standout-primary',
'rel':'no-follow',
'text':'Sign Out'
});
var li = $('<li/>', { 'class':'btn log-out-button' }).append(link);
$('.right').append(li);
An Example Here.