I am using CodeSandbox to write up a localized access point for my social media (just to have fun with the Vanilla parcel pack they have). Now, I have my buttons calling separate functions, but when I select a button, the error "Function is not defined"
My functions for the buttons are stored in a separate file than the regular JavaScript.
I have looked on W3Schools to see how this is done. Several times I tried even putting the function within the HTML page itself to see if that helps; however, the error still appeared.
Below is an HTML example:
<button type="button" onclick="sShowFunction()">
Discord Status
</button>
<br />
<p id="dshow">Reveal Discord Status</p>
<script src="extras/buttons.js" type="text/javascript"></script>
This is the js function:
function sShowFunction() {
document.getElementById("dshow").innerHTML = `
<iframe src="https://discordapp.com/widget?id=<server id>&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
`;
}
I expect the output when I press the button to display the discord widget. Instead, I produce the aforementioned error. My best guess is that I am missing a piece of code to call the function.
In the console, I receive this error:
sShowFunction' is defined but never used. (no-unused-vars)
depend where you have declare the function .. could be is not accessible .. from the html level
be sure your js code is inside a valid scritpt tag
<script>
function sShowFunction() {
document.getElementById("dshow").innerHTML = '
<iframe src="https://discordapp.com/widget?id=<server id>&theme=dark"
width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
';
}
</script>
and don't use backtics for wrap string .. use quote
Why dont you put a class/id in the button and then use listener like this:
<button type="button" id="sShowFunction">
Discord Status
</button>
<br />
<p id="dshow">Reveal Discord Status</p>
<script>
document.getElementById("sShowFunction").onclick = function() {
document.getElementById("dshow").innerHTML = `
<iframe src="https://discordapp.com/widget?id=<server id>&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
`;
}
</script>
Also, you are maybe getting this error from inside the iframe.
Can't you post some photo of the error on developer console or provide more about your javascript?
See if chrome>console>network request for buttons.js is ok (not red) because code provided by you works in my local machine
So what we need to do is create a static template on codesandbox. For doing this, go to the settings option on the left sidebar and then click on create sandbox.config.json. Then on this, select under template -> static option as shown in the image below.
To save time, you can fork this one - https://codesandbox.io/s/static-vanilla-js-template-qzxfi
A detailed solution is mentioned on this Github issue - https://github.com/codesandbox/codesandbox-client/issues/1502#issuecomment-584886419
Related
I need to create a tightly controlled environment for opening certain pages that need back and forward navigation controls. I had poked around on here and found this question and tried to implement it, but I'm having a problem.
I have the following for the HTML and Javascript going on, assume it's already styled (reusing code from previous project), and JQuery is already listed in the <head></head> tags:
<body>
<div id="header">
<div id="shortcutbar">
<a id="backBtn" onclick =="iframeBack();"></a>
<a id="forwardBtn" onclick =="iframeForward();"></a>
</div>
</div>
<div id="displayContainer">
<iframe id="display" src="https://website.goes.here/">
</iframe>
</div>
<script>
function iframeBack() {
$("#display").contentWindow.history.go(-1);
}
function iframeForward() {
$("#display").contentWindow.history.go(1);
}
</script>
</body>
Checking the console, I get the following error: Uncaught TypeError: Cannot read property "history" of undefined and it gives both whatever line the function is called in the HTML, and the line of the function itself in the script tags.
I'm at a loss of what isn't working, as everything I've found thus far just refers to some variation of what I've already typed.
The jQuery object doesn't have contentWindow property.
You need the underlying element ... $("#display")[0].contentWindow.
With that said if the iframe source is from a different origin than the main page you are security restricted from accessing the frame window using javascript
You can use postMessage also for secure communication
$("#display").contentWindow.postMessage('back');
window.addEventListener('message', ({ data }) => {
data === "back" && window.history.back()
});
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Can't click on the anchor inside a frame with href value as javascript using selenium.
#Note: I could manually click/ call the javascript from IE developer console all looks good. The issue is only through selenium .
Here is the page source like
<html>
<body>
<p>
<iframe name="iframe1" width="100" height="218" src="about:blank" frameborder="0" marginwidth="0" "marginheight="0" scrolling="yes">
<html>
<body>
<div class="className" id="DivName"onmouseover="startLinkHover(0,70)" onmouseout="stopLinkHover()">
<a name="link0" href="javascript:function()" shape=""> This is link 1 </a>
</div>
</body>
</html>
</iframe>
</p>
</body>
</html>
I am working with c# ,IE and selenium
Selenium.WebDriver.IEDriver" version="2.53.1.1"
Selenium.WebDriver" version="3.0.0"
Selenium.Support" version="3.0.0"
IE 11 ( As my web application only support IE)
Here is what i have tried:
As it the page is consisting of iframe
1) I am switching to iframe and find the anchor using the name and click
driver.SwitchTo().Frame(driver.FindElement(By.Name("iframe1"));
driver.FindElement(By.XPath("//a[#name='link0']")).click();
2) I have also tried to extract the href property into a string variable and tried to execute the javascript using Javascript executor.
driver.SwitchTo().Frame(driver.FindElement(By.Name("iframe1"));
var js=driver.FindElement(By.XPath("//a[#name='link0']")).GetAttribute("href");
var jsDriver = (IJavaScriptExecutor)driver;
jsDriver.ExecuteScript(js);
Please excuse if any typos as i don't want to post the html source here i have explained my issue with a sample.
Thank you
Finally i managed to resolve this issue by reloading the project from source control after pointing the .net framework target version to 4.5 instead of 4.52 (not sure why would this be?).
after investigations , it was proved that issue was not with selenium clicking on the element but the execution of java script after that with page loads.
For some weird reason, iFrame is not showing the right content when updated by JavaScript. It is the very same link, but with different results
https://jsfiddle.net/omarjuvera/qvbpcy9k/1/
HTML
Desired result
<br/>
<iframe src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=ow-20&marketplace=amazon®ion=US&placement=B004BCXAM8&asins=B004BCXAM8&linkId=SK5UG2J5CK4WNOKE&show_border=true&link_opens_in_new_window=true"></iframe>
<br/><br/>
JavaScript update
<br/>
<iframe id=link src=""></iframe>
JS
document.getElementById("link").src = '//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=ow-20&marketplace=amazon®ion=US&placement=B004BCXAM8&asins=B004BCXAM8&linkId=SK5UG2J5CK4WNOKE&show_border=true&link_opens_in_new_window=true';
For some reason your ampersands are & amp; just make them &. It seems like the static code fixed the problem for you internally but the javascript did not.
document.getElementById("link").src =
'//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=ow-20&marketplace=amazon®ion=US&placement=B004BCXAM8&asins=B004BCXAM8&linkId=SK5UG2J5CK4WNOKE&show_border=true&link_opens_in_new_window=true'
so I've been trying to make X and Os for a HTML5/JS course project thinking it would be easy, but have had several days of trouble trying to change an image's source from "Tile.png" to "XX.png". I have found similar threads on the site on very similar problems, but none of them worked for me, they all got the 'rare' error though, so I'm thinking there's a double whammy going on here. Help pls!
Here are the two errors I've seen during the hundreds of attempts using javascript and HTML5 for various attempts.
Uncaught ReferenceError: $ is not defined client.js:102
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
or
attempt to set image src to null (This showed up in most attempts, the other error is a rare occurrence that shows up when I think I've nailed it.)
-
The code consists of a HTML5 file and a Javascript file which just holds variables that aren't used yet. Here is the problem code showing the javascript function and the HTML button and clicking that runs it. The error pops up when the button is clicked, so I believe the code is in the javascript part.
<script>
function YUNOCHANGE()
{
var img = document.getElementById("tst1");
img.src = "Images/XT.png";
}
</script>
<button onclick="YUNOCHANGE();" type="button" id="tst1" name="One" alt="Grey tile" height="175" width="200" style="text-align:center">
<img src="Tile.png"/>
</button>
The Button has no property "src":
<script>
function YUNOCHANGE()
{
var img = document.getElementById("img1");
img.src = "Images/XT.png";
}
</script>
<button onclick="YUNOCHANGE();" type="button" id="tst1" name="One" alt="Grey tile" height="175" width="200" style="text-align:center">
<img id="img1" src="Tile.png"/>
</button>
I am trying to print a page with window.print but it ain't working in all the browsers.
This is the code that i am using:
<div class="user_buttons">
<!--Test 1-->
<IMG SRC="images/print.png" BORDER="0"
<!--Test 2-->
<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>
<!--Test 3-->
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
<!--Test 4-->
<img src="images/print.png" onclick="window.print()">
<div><img src="images/overzicht.png" title="Terug naar overzicht"></div>
</div>
As you can see i am trying multiple solutions given by the internet. What is frustrating is that those codes are working on the demo sites but they aren't on my page. I post my code in JSF. The JSF example will not be a working example but it will have the entire code in the javascript area. The link for the entire code is here: http://jsfiddle.net/7bRNu/
I finally got it. It was a very painfull process of searching errors in a huge mess of code. The next time you ask a question on stackoverflow, please make sure that you broke the problem down into smaller pieces and post only the code that you think is probably the cause of your problem.
In the very bottom of your entire code, there is a little script-section in which it says:
var print = document.getElementById("print").value;
You are in the global scope, meaning that every variable you declare will be a property of window. Therefore, by writing print = you actually redefine window.print. Change the name of this variable and you should be good. The following line is only an example. You can choose whatever variable name you like. Just don't use print.
var printValue = document.getElementById("print").value;
Here is one method isolated:
http://jsfiddle.net/5PumN/
<IMG SRC="images/print.png" BORDER="0"
It works just fine here.