We Keep Coding

Changing Div content with innerHTML

I've read through many other questions on this but none seem to solve my problem.
I have created a div element which houses an icon from fontawesome. It's a media player icon where i use an if/else argument to change from PLAY to PAUSE and back again. Without using the fontawesome element it works but i like the icon. I've also looked up using jquery instead but it's a little beyond my knowledge.
It's the i class="fa fa-stop" aria-hidden="true" it doesn't like.
<script language="javascript">
function chPlay2() {
if (document.getElementById("player").title =="Toggle Play")
{
audio.play();
document.getElementById("player").title = "Toggle Stop";
document.getElementById("player").innerHTML = " <i class="fa fa-stop" aria-hidden="true"></i>";
}
else
{
audio.pause();
document.getElementById("player").title = "Toggle Play";
document.getElementById("player").innerHTML = " <i class="fa fa-play" aria-hidden="true"></i>";
}
}
</script>

You should use like this-
document.getElementById("player").innerHTML = ' <i class="fa fa-stop" aria-hidden="true"></i>';
Just replace the double quotes with single quotes.

You have a double qoute inside your string literals. Try using
the ` for string template or escape your double qoutes using \ (the escape character). it would look something like this
document.getElementById("player").innerHTML = ` <i class="fa fa-stop" aria-hidden="true"></i>`;
or alternatively,
document.getElementById("player").innerHTML = " <i class=\"fa fa-stop\" aria-hidden="true"></i>";
This is true for many languages so you might want to keep this in mind.

convert html to html string in JS file

I want to create some html via JS, therefore I need to write the html inside the JS file like:
function createHtmlSection() {
return "<li class=\"chapter up-wrapper-btn\">" +
"<div>" +
"<button><i class=\"fa fa-plus\" onclick=\"addSection('up',this)\"></i></button>" +
"<label contenteditable=\"true\">section 1</label>" +
"</div>" +
"</li>";
}
is there a tool or some shortcut to create this type of html string?
I mean, in this case I was needed to type all this html by hand. with + and needed to add " sign.
Something that can convert this:
<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>
to the first string that I was needed to type by hand

You can use a template literal (note the back-ticks). The literal supports multiline, and you won't need to escape the quotes (you'll need to escape back-ticks).
`<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>`
Example:
function createHtmlSection() {
return `
<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>
`;
}
document.querySelector('#root')
.innerHTML = createHtmlSection();
<ul id="root"></ul>
You can also pass parameters to the function, and insert them to the string using expression interpolation:
function createHtmlSection(label) {
return `
<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">${label}</label>
</div>
</li>
`;
}
document.querySelector('#root')
.innerHTML = createHtmlSection('!!! section !!!');
<ul id="root"></ul>

update your JS file to:
function createHtmlSection() {
return `
<li class="chapter up-wrapper-btn">
<div>
<button>
<i class="fa fa-plus" onclick="addSection('up',this)"></i>
</button>
<label contenteditable="true">section 1</label>
</div>
</li>
`
}
Read this link for more information:
template literals

You can also use ' (one quote) so you dont have to put / front every "

Just use template literals (not a single quote "'" but the back-tick "`") like this:
// JavaScript
document.getElementById("a").innerHTML = `<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>`
<!-- HTML -->
<div id="a"></div>
Template literals are string literals allowing embedded expressions.
You can use multi-line strings and string interpolation features with
them. They were called "template strings" in prior editions of the
ES2015 specification.
Via - MDN Web Docs

An alternative method is to use single quotes and escape the newline character.
Something like this:
function createHtmlSection() {
return '<li class="chapter up-wrapper-btn">\
<div>\
<button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>\
<label contenteditable="true">section 1</label>\
</div>\
</li>';
}
console.log(createHtmlSection());
Swapping to single quotes saves you from escaping the double quotes in the HTML, but you still need to quote the single quotes.
Another alternative is to use an array and .join('') it:
function createHtmlSection() {
return [
'<li class="chapter up-wrapper-btn">',
'<div>',
'<button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>',
'<label contenteditable="true">section 1</label>',
'</div>',
'</li>'
].join('');
}
console.log(createHtmlSection());
This allows you to easily add/edit/delete parts of the code later on.
Both of these options are for ES5 or older.
For modern browser, please use the ES6 version provided by Ori Drori.

Trying to call js function from php and pass php html string as argument

Here is the problem which I am facing.
echo "<script type='text/javascript'>window.insertCartInHeader({$cart});</script>";
$cart variable is holding HTML block of code.
I get Uncaught SyntaxError: Unexpected token <
Solution?
window.insertCartInHeader = function(cart){
console.log(cart)
var list = $("#top-links").append('<ul id="cart-header"></ul>').find('#cart-header');
list.append('<li>'+cart+'</li>');
}
Here is the string which I am passing
'<div id="cart">
<button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="heading dropdown-toggle">
<div class="pull-left flip"><h4></h4></div><span id="cart-total">0 item(s) - £0.00</span></button>
<ul class="dropdown-menu">
<li>
<p class="text-center">Your shopping cart is empty!</p>
</li>
</ul>
</div>
' (length=402)

You need to add quotes ("), to let javascript know it's a string, and you should use addslashes, since you may have classes or attributes in that html.
echo "<script type='text/javascript'>window.insertCartInHeader(\"". addslashes($cart) . "\");</script>";
Without addslashes something like this, won't work:
$html = '<h1 class="hi">It works</h1>';
For multiline html, this should work.
str_replace("\n", "\\", addslashes($cart));
You can improve that replace, but you get the idea.

Random quote machine or tweet current quote doesn't work

jQuery on click function to tweet current quote doesn't want to work. What is wrong here. I have to build random quote machine and tweet current quote. I've managed to do JSON API but cannot figure out how to tweet current quote. Please help.
HTML:
<div class="container-fluid">
<div class = "well">
<div class="row">
<h2 class="text text-center"><i class="fa fa-quote-left"> </i> Hey, what when and why there is no and yes?</h2>
<p class="author">-Alina Khachatrian</p>
<div class="buttons">
<div class="row">
<div class="col-xs-6">
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
</a>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-transparent" id ="getNewQuote" title="Get a new quote">New Quote</button>
</div>
</div>
<footer class="text-center">
<hr>
<p>Written and coded by Edgar Kiljak.</p>
</footer>
</div>
</div>
JS:
$(document).ready(function(){
$(".btn").on("click", function(){
$.getJSON("http://quotes.stormconsultancy.co.uk/quotes.json", function (json) {
var html = "";
var len = json.length;
var index = Math.floor(Math.random() * len);
var val = json[index];
html += "<div class = 'newQuote'>";
html += "<h3>'" + val.quote + "'</h3>";
html += "</div>";
$(".author").text(val.author);
$(".text").html(html);
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
$(val.quote).text() +"&via=your-app-name&original_referer=your-url");
});
});
});
});

First problem I had was that I couldn't even see the link to Tweet Current Quote. I had to add the text in the anchor:
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
TWEET CURRENT QUOTE
</a>
Second: it was popping up the new Twitter window, but not filling the text. In your onclick code, the $(val.quote).text() was unnecessary - just use val.quote
Third: you'll see that in addition to opening the new Twitter window, it is opening another occurrence of your own page. This has to do with how you have the tweet-quote anchor defined in your html, but the easiest way to stop it is to add return false in your onclick so that the target in the anchor doesn't fire:
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
val.quote +"&via=your-app-name&original_referer=your-url");return false;
});
Fourth: if you load a second 'New Quote', and then click the 'Tweet This Quote', you'll see that it opens two new windows -- it is tweeting both the old and the new quotes. This is because the on("click") is cumulative. You should clear out any existing function before setting the new one:
$('#tweet-quote').unbind("click");
$('#tweet-quote').on("click",function(){
window.open ...
Fifth: Usually when you post a question here, "doesn't work" is not a sufficient explanation. You should explain what's not working, or what is working differently than you want it to. Error messages if there are any. What you saw in the console logs. Some people get real sticky about that. And some people will probably get sticky about me doing your homework for you. Good luck though!

JavaScript innerHTML does not show up

This is my code.
var warning = '<div class="ui inline cookie nag style="display: block;"><span class="title">Tava ekrāna rezolūcija ir pārāk maza, lai skatītu šo lapu. Lūdzu, palielini rezolūciju vai attālini lapu!</span><i class="fa fa-times fa-fw" style="color: #eee; float:right"></i></div>';
document.getElementById("resWarn").innerHTML = warning;
Nothing is showing up, when putting script into html page.
Script is included UNDER <span id="resWarn"></span>. When I set variable warning to anything like sdnhasjkshushduig, it show up.
Please help.

You are missing a quote after -> "nag"
class="ui inline cookie nag"

I think you just have to put quotation marks before the keyword style.
Like this:
var warning = '<div class="ui inline cookie nag" style="display: block;"><span class="title">Tava ekrāna rezolūcija ir pārāk maza, lai skatītu šo lapu. Lūdzu, palielini rezolūciju vai attālini lapu!</span><i class="fa fa-times fa-fw" style="color: #eee; float:right"></i></div>';