Malformed Html, function in onclick - javascript

I'm struggling to find workaround with GAS.
This very simple, work perfectly fine in this snippet or in any html tool.
<a href="#" onclick=dummyFunc(foo)>OK</a>
<a href="#" onclick=dummyFunc("param")>not OK</a>
But google app script dont reconize the seconde line like valid html. If you put it in HtmlService.createHtmlOutput() or any other function that create html from the HtmlService it will raise Exception: Malformed HTML content.
EDIT
The only way I find to make it work is using:
<script>var param="param";</script>
<a href="#" onclick=dummyFunc(param)>OK</a>
Thank for you help. Have a great day.

Indeed, your html is not valid.
Here's the right way :
OK

Related

Add popup based on class (most likely)

I'm trying to use Tampermonkey to add a popup on pages in the Canvas LMS. It's a forum, and after each post there is a "Reply" option, which is what I want to add the popup to. But when I click the "Reply" link, no popup appears. It opens the Reply box, as normal, but my popup is nowhere to be seen.
The code looks roughly like this:
<div class="entry-controls hide-if-collapsed hide-if-replying">
<div class="notification" data-bind="notification"></div>
<a role="button" class="discussion-reply-action entry-control" data-event="addReply" href="#">
<i class="icon-replied"></i>
<span aria-hidden="true">Reply</span>
<span class="screenreader-only">Reply to Comment</span>
</a>
</div>
The JS code I'm trying to add is:
document.querySelectorAll('.discussion-reply-action').forEach(item => {
item.addEventListener('click', event => {
alert("Popup text here");
})
})
In addition to .discussion-reply-action, I've tried using .entry-controls, .notification, .entry-control, even stuff like span[aria-hidden="true"]. Nothing seems to work.
I know the Tampermonkey script itself is applying correctly, because it has other functionality that is showing up as usual.
Any idea why this bit isn't working for me? I'm a complete JS noob, for what that's worth.
This got answered in the replies, but just wanted to formally note that it came down to delaying my code injection. I was trying to attach to elements that loaded after the doc. Once I got behind them, it worked fine.

Change data-content in a bootstrap popover

I'm really new to coding, I've searched a bit to try to find an answer and I feel like there's a very simple way to do this, but the answers I find I can't understand.
I have this example which shows the popover.
<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>
I want to change the content of data-content in my JavaScript file
I tried this but it doesn't seem to work.
document.getElementById('test').setAtribute('data-content','hello');
As you are using jquery, try setting the value for content as shown below,
$('#test').data('content', 'hello');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>
Javascript can be a dangerous tool... it can and will silently do nothing if what you write is not valid Javascript.
So this line:
document.getElementById('test').setAtribute('data-content','hello');
has a misspelling in 'SetAttribute', which tries to call a function that doesn't actually exist (since it's misspelled), and so it does nothing at all.
First step when debugging: re-read your code carefully!

Fancy Box Not Working?

Unable to pin with fancy box is not working. I followed the directions on this link...
http://fancyapps.com/fancybox/
<h5 class="product-title">$25.00 Off First Lyft Ride</h5>
<p class="product-desciption">Get a free $25.00 towards your ride with Lyft when you use the activation code below! If you need a return ride make sure to use the Uber Promo Codes, and get a free ride back!<br><br><font size="2"><b><a class="fancybox" rel="group" href="https://www.youtube.com/watch?v=WyJsb4ANIy8"><font color="#858585">Watch Video Review<font></a></b></font></p>
All javascript and link rels are correct. A class looks correct as well. Any ideas?
Web page is www.couponcodeshero.com
You have to use youtube.com like :
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
Also i have found error in your console for fancybox. Error is :
Uncaught TypeError: $(...).fancybox is not a function
So this means that you have not found fancybox.js file data on this page. OR your fancybox js jQuery is conflicting with other jQuery library.

Concatenate Two strings in HTML in client side(No Server)

Can I concatenate two strings in HTML?
I want to achieve the following functionality-
go to the 1st DIV tag.
It could have been done using document.write() in javascript but I want to know if there is any concatenation functionality in HTML itself.
No, there isn't.
HTML is markup, it is not turing complete.
One (primitive) way to achieve this with JavaScript would be
<a href="#"
onclick="window.location.hash='#'+document.getElementsByTagName('div')[0].id; return false;">
go to the 1st DIV tag.
</a>
But since those links are useless when JS is not available, they should probably only be generated by JS in the first place.
No, there isn't. HTML is markup.
You should use dynamic HTML and JavaScript to achieve this.
you can do this by using this.href in java script
<a href="#" onload="this.href=this.href+document.getElementsByTagName('div')[0].id;" >
ex
<a href="targetWithInDoc.html" onload="this.href=this.href+'#block1';" >block 1</a>
This can't be done in the way you're attempting, but if JavaScript is running on the client anyway then you can still achieve the functionality you're looking for. You just need to separate the tag from the script:
Go to the first DIV tag
<script type="text/javascript">
document.getElementById('someID').href = '#' + document.getElementsByTagName('div')[0].id;
</script>
I know it wont help u now but I'm posting this for others who will come to this question by searching
we can achieve it this way :
<a href='<%#String.Concat("string1", "string2")%>'></a>

print javascript variable in HTML between quotes

I've got a variable and I want to display the value of it in a specific place of my HTML.
Much like +variable+ within javascript.
My setup is as followed:
The HTML:
short version:
addthis:url="http://example.com/script.php?code="
the HTML full version:
<div class="addthis_toolbox addthis_default_style "
addthis:url="http://example.com/script.php?code="
addthis:title="An Example Title"
addthis:description="An Example Description">
Share
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
I would like to "print" the value of my variable after the = so it would result in:
addthis:url="http://example.com/script.php?code=myVar"
I had found document.write but this won't work since I will have to place the script tags between quotes.
Hope someone can help me out!
String concatenation
addthis:url="http://example.com/script.php?code=" + myVar;
Try to use a placeholder and replace it with jquery:
https://stackoverflow.com/a/7480394/1380486
You wont be able to do it the way you want (with document.write). Even if you solve the quote problem, you will still have to have script tags inside of your div tags like this:
HTML
<div addthis:url=<script>document.write("http://example.com/script.php?code=myVar")<script>>
This simply will not work.
With jQuery you could select that element and add the attribute when the dom is ready.
JavaScript
$(document).ready(function(){
$(".addthis_toolbox").attr("addthis:url","http://example.com/script.php?code=myVar")
});

Categories