JavaScript isn't loaded when using link element - javascript

Im trying to make a website with JavaScript popups. Basically, when you click a link an alert or prompt comes up saying "You are now entering the [enter webpage name here] section."
For some reason, when I click the link, it will open the page but ignore any JavaScript! Here is the basic code:
HTML:
<html>
<head><link rel="text/javascript" href="effects.js" /></head>
<body>
Click here
</body>
</html>
JavaScript (effects.js):
function common_lang() {
var enterCommon = prompt("You are now entering the Common Languages section.");
}
I don't get why this won't work! Does anyone have any ideas? Also, is there a way to make this more efficient? And I need the file in the same window so I can't use any window.open jazz. But efficiency isn't a priority, remember!

You should use the script tag instead of link
<script type="text/javascript" src="effects.js">

First you need to change the link tag to script like:
<script type="text/javascript" src="effects.js"></script>
Second, this is because you are using the href attribute so the link just redirects you to common_code.html
if you want to navigate to the link based on user prompt selection you can do it like:
Click here
function common_lang() {
var enterCommon = prompt("You are now entering the Common Languages section.");
if(enterCommon) {
var a = document.createElement('a');
a.href = "common_code.html";
a.dispatchEvent(new Event('click'));
}
}

Related

html page disappears after onclick("open()") event

I wrote an html as
html>
<head>
</head>
<body>
<span onclick = "open()">open</span>
<script src= "script.js"></script>
</body>
</html>
and javascript as
function open(){
var id = "10";
}
whenever I click on the open text in the browser the whole page gets wiped out . Is "open" a reserved word in javascript as with any method name it works(screen doesn't get wiped out) . Just wondering what is happening behind the scene. Any information is appreciated.
I actually came across a similar question recently - the reason this is happening is because open() is being interpreted as window.open(). When no parameters are passed into this function, it navigates to a blank window.
You might be able to circumvent this by putting your script in the head, but a better recommendation is to give your function a more meaningful name.
Side note: Not certain if the behavior is the same across browsers, but in Google Chrome, calling open() opens a new tab.
Further reading on the function here: https://developer.mozilla.org/en-US/docs/Web/API/Window/open
as a general rule you will have a lot of conflicts if you program that way - you need to be more modular - use objects/json for namespacing
<html>
<body>
<span onclick = "mylibrary.open()">open</span>
<script src= "script.js"></script>
</body>
</html>
and javascript as
var mylibrary = {
open : function(){
var id = "10";
}
}
roughly ...

jQuery DOM manipulation won't get the href attribute

Using this code, I am trying to get the href attribute of a link and make a new link of that attribute. Why my link does not work, I don't know. It shows something like this:
404 - The page cannot be found
Sorry, we cannot find the page.
It might have been removed, had its name changed, or is temporarily
unavailable.
Please check that the Web site address is spelled correctly.
Or go to our home page, and use the menus to navigate to a specific
section.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
text ="";
text +=$("#w3s").attr("href");
document.getElementById("demo").innerHTML="<a href=\'text\'>W3Schools.com</a>";
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Show href Value</button>
<p id="demo"></p>
</body>
</html>
If I use:
document.getElementById("demo").innerHTML = text;
It shows http://www.w3schools.com. Why doesn't the link go to this site?
If you're going to use jQuery to traverse and manipulate the DOM, use jQuery. If you're going to use vanilla javascript... do that. Just try not mix them! Makes things easier in the long run. Anyway, you could do something like this to set the href attribute;
$('#demo').attr('href', text);
or
document.getElementById('demo').href = text;
btw this
"<a href=\'text\'>W3Schools.com</a>"
Is totally not how you do string concatenation in javascript. Should be
'W3Schools.com'

Add HTML when a certain checkbox is checked

I want to add HTML to a page a certain checkbox is clicked (right now it's Reddit's 'Remember Me' checkbox, but in the future I'm want it to work with more checkboxes). I have made this content script, but I have no idea if it's doing anything to the opened chrome tab.
\\content_script.js
$(document).ready(function() {
var inputTable = document.getElementByTagName('input');
for(var i=0; i<inputTable.length; i++){
if((inputTable[i].getAttribute('type')=='checkbox') && (inputTable[i].getAttribute('name')=='rem')){
var rememberMe = inputTable[i];
}
}
document.addEventListener('DOMContentLoaded', function () {
rememberMe.addEventListener('change', changeHandler);
});
}
function changeHandler(){
if(rememberMe.checked){
var remTrack = chrome.extension.getURL ("rememberme.htm");
document.body.insertBefore (remTrack, document.body.firstChild);
}
else{
}
}
rememberme.htm is the html that I want to add containing the mp3 that I want to play (Will this work if the page isn't necessarily in HTML5?).
<!DOCTYPE html>
<html><head>
<title>Remember Me</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="HelloWorld.js"></script>
</head><body>
<audio autoplay loop>
<source src="remember.mp3" type="audio/mpeg">
</audio>
</body></html>
From what I've been reading it seems like I should just make the content script call whatever javascript that I want the open chrome tab to run, but I don't know how to do this while also inserting HTML into the open chrome tab. Any help is appreciated, and if the tag won't work if the page is not in HTML5 then what is the easiest way to play the mp3 in javascript?
Reddit is my favorite page, I guess that Redditors should stick together, so here's your script refactored.
It appends a track with 'God Save the Queen' played by United States Navy Band to Reddit homepage after clicking remember me button. When specifying audio source you need to give an url where the track is located, just like with images. You also don't need to add head and body, and the way you are fetching your html it is mistaken, you're actually getting only an url not html of your extension.
window.onload = main();
function main() {
var elem = document.getElementById('rem-login-main');
elem = addEventListener('change',changeHandler);
}
function changeHandler () {
var yourAudio = document.createElement('audio');
yourAudio.src = "http://upload.wikimedia.org/wikipedia/commons/d/de/United_States_Navy_Band_-_God_Save_the_Queen.ogg";
yourAudio.controls = true;
yourAudio.autoplay = true;
var parentNode = document.getElementById('header');
parentNode.insertBefore(yourAudio);
}
To test it go to Reddit, click F12, open chrome browser devtools console, within devtools go to tab sources, find tab snippets, right click, create new snippet, copy paste this code, save it, click play button on the right (it says 'run snippet' when you hover over it). If you want to make it an extension you need manifest.json.
Hope it works, don't remember to upvote or accept an answer if you find it useful.

Javascript function add value in other html page

<head>
<script type="text/javascript">
function productID(id)
{
document.getElementsByTagName('input')[0].value = id;
}
</script>
</head>
<body>
<img src="...images/car.jpg" onclick="productID('1')">
</body>
When the user click on the image:
1) A new page open
2) The javascript function search for the first form field input in the page and write in it the productID
My question is:
How can I let this function write the productID in the first form field input in page.html that the user is already moved to it when he clicked on the image?
not in the same page!
You don't have a reference to the document or window of page.html. If you opened the link with, for example: window.open you would. This means you can't do it with JavaScript.
You can do it with the use of a server side scripting language.

Prevent webpage dialog from spawning new browser window?

I have an open web page dialog. From there, what I'd like to do is when the user clicks on a link, refresh the contents of the dialog with modified query string parameters. The problem I am running into is that rather than refresh the same web page with new parameters, a new browser window pops up.
Here is the page used to open the dialog:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function ShowPopup() {
var popWinFeatures = "dialogWidth: 800px;dialogHeight:600px;center:yes;status:no;scroll:no;resizable:yes;help:no";
window.showModalDialog("webPageDialog.html","PopUpWin",popWinFeatures);
}
</script>
</head>
<body>
Click For Modal
</body>
</html>
and this is the code within the webpage dialog that attempts to refresh the webpage with changed query string parameters:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var queryString = "?ab=123";
var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
$('#testLink').attr('href', newURL+queryString);
});
</script>
</head>
<body>
Please Click Me
</body>
</html>
I've also tried using window.open as well as setting window.location. And I've also tried setting window.location.href but the result was the same.
the new browser window displays exactly what I expect. It's just not in the same window.
Thoughts?
Since posting this question, I came up with two possible solutions. In case anyone comes after me and wants to know what I ended up doing, here you go!
The first was just to make the popup non-modal. Removing the modal piece gave me the behavior exactly like I expected it. This didn't work in my situation however for a different reason... It seems that the session cookie was not carried over which in this web app, would cause the log-in page to be displayed before then displaying the correct page. This struck me as odd, but ran out of time to investigate why that was happening.
Second (and this is the solution i ended up going with) was to use an iframe, and display what i needed within the iframe. Definitely not my favorite, but it works!

Categories

Resources