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.
Related
I changing HTML near the top of my website using JS and its not working I was having a similar problem earlier because the quotations were messing it up but i tried to fix it with that method but it still isn't working.
document.getElementById("accTabs").innerHTML = "<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>";
document.getElementById("accTabs").innerHTML = "<a onclick=\"document.getElementById('id01').style.display='block'\" class=\"w3-bar-item w3-button\" id=\"log\"><i class=\"fas fa-users\"></i> SIGN IN</a>";
<div id="accTabs"></div>
Please try like this snippet.
Your error is raised because you used quote incorrectly.
document.getElementById("accTabs").innerHTML = "<a onclick="alert('ok')"></a>";
If you try like this code, then double quote inside double quote will cause the problem.
You need to change this like below to escape the problem
document.getElementById("accTbs").innerHTML = "<a onclick=\"alert('ok')\"></a>";
You could also use ES6 template literal. then you can use double quote and single quote inside string without any problem.
document.getElementById("accTabs").innerHTML = `<a onclick="alert('ok')"></a>`;
document.getElementById("accTabs").innerHTML = "<a onclick=\" document.getElementById('id01').style.display='block'\" class=\"w3-bar-item w3-button\" id=\"log\"><i class=\"fas fa-users\"></i> SIGN IN</a>";
<div id="accTabs"></div>
Just properly escape your " with \" and use ' to wrap the string, reducing escapes
document.getElementById("accTabs").innerHTML = '<a onclick="document.getElementById(\'id01\').style.display=\'block\'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>';
<div id="accTabs"></div>
<div id="id01" style="display: inline">id01</span>
Moreover, you could also try ES6's backtick ` to even completely avoid escaping.
document.getElementById("accTabs").innerHTML = `<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>`;
<div id="accTabs"></div>
<div id="id01" style="display: inline">id01</span>
try using template strings as shown below
document.getElementById("accTabs").innerHTML = `<a
onclick="document.getElementById('id01').style.display='block'" class="w3-bar-
item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>`;
This would work.
Learn more about Templete strings Here
I have the following code in jquery in which I am trying to add a child under a parent span tag:
jquery
var branchName = $(this).closest('tr').find('#adjNcmcompanyNameId').text();
var branchId = $(this).closest('tr').find('#adjNCMBranchIdForSearch').text();
var branchRecord = $(this).parents().find('#resultsection');
branchRecordSpan = ("<span class='multiselectContainer'></span>");
branchRecordSpan.append("<span class='indivSelectedText'>" + branchName + "</span>");
branchRecordSpan.append("<input class='indivSelectedValue' type='hidden' value=" + branchId + ">");
branchRecordSpan.append("<strong class='alert-pink'><i class='fa fa-chevron-left fa-lg'></i></strong>");
branchRecordSpan.append("</span>");
branchRecordSpan.append("<br/>");
html that I am trying to get
<div id="resultsection">
<span class="multiselectContainer" id=
"c85a47e3-40c0-48e1-95f0-89dd761dbb56"><span class=
"indivSelectedText">MY BRANCH</span> <input class="indivSelectedValue"
type="hidden" value="183424"> <strong class="alert-warning"><i class=
"fa fa-chevron-left fa-lg"></i> <i class="fa fa-database"></i>
,DATAHUB/ 8683403</strong> <a class="fa fa-times-circle labelclose"
href="#"></a></span><br>
</div>
Since all the content are under the multiselectContainer span class, I am trying to generate html dynamically using append and I am failing.
When I try to append under branchRecordSpan, it is throwing an error as it is not a function. I am not able to create child for the "multiseleccontainer" span class.
How can I create a span tag dynamically under another span tag? Please help.
Do it in stages.
x = $('<span>parent span</span>');
x.append('<span>new child span</span>');
someparent.append(x);
Or just do it directly:
x = $('<span>parent<span>child</span></span>');
The second option is generally more efficient. Every time you .append() something to the DOM, there's fair amount of background work to parse/modify/re-render/etc... It's generally best to build html as a string, then insert it into the DOM in one big chunk, rather than a series of smaller chunks.
You forgot a dollar sign here:
branchRecordSpan = ("<span class='multiselectContainer'></span>");
I want to clear out the "normal text", but no glyphicon's.
The important code sections and its results:
$("#btn_test").html() will give me:
"<span class="glyphicon glyphicon-floppy-disk"
aria-hidden="true"></span> Speichern & schließen"
$("#btn_test").text() will give me:
" Speichern & schließen"
I just want to delete the text "" Speichern & schließen", without .replace(...)-function (because the text is dynamic).
I tried $("#btn_test").text(""), but this will clear also my span element.
Thank you.
Updated('possible duplicate'):
Yes, it is the same question like here, but not the answer of Chris Davis, which solved my problem.
Remove the text node, e.g:
$('#btn_test').contents().filter(function(){
return this.nodeType === 3;
}).remove();
Or simpler, if it's always the last:
$('#btn_test').contents().last().remove();
-jsFiddle-
Simplest way would be to wrap your text in a span — it then becomes trivial to remove this text.
$(document).ready(function() {
$('#btn_test .text').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_test">
<span class="glyphicon glyphicon-floppy-disk"
aria-hidden="true"></span>
<span class="text">Speichern & schließen</span>
</button>
jsFiddle link
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>';
What do I need:
I need to have something like "toggling of images" using the functions to add & remove classes in jquery.
JavaScript code
$('.hover12').click(function () {
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
});
HTML code
<a href="javascript:void(0);" class="hover12">
<i class="fa fa-star-o favourate_dextop" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
</a>
Problem:
On the first click, remove class works fine and add class to that particular class.
Then I have a problem on the second click, neither remove or add class works.
o/p on first toggle
<i class="fa favourate_dextop fa-star orange12" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
The solution I found:
$('.hover12').click(function () {
$('.fa-star').removeClass('fa-star orange12').addClass('fa-star-o');
});
Change this
$('.fa-star-o').RemoveClass...
to this
$(this).find('i').RemoveClass...
try this:
$('.hover12').click(function()
{
$(this).find('.fa').toggleClass('fa-star-o').toggleClass('fa-star orange12');
});
The selector fails for .fa-star-o class the second time because there is no class like that since it was removed on the first click.
$('.hover12').click(function(e){
e.preventDefault();
if($('.hover12 i').hasClass('fa-star-o')){
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
}else if($('.hover12 i').hasClass('fa-star'){
$('.fa-star-o').removeClass('fa-star orange12').addClass('fa-star-o');
}
});
This is one ugly solution though!