example <a id = "fb" href= "#">Facebook</a>
Actually i want if page is Arabic it should be like this
href = "www.facebook.com/ar"
if page is English href = "www.facebook.com/en"
Maybe this helps
let lang = document.documentElement.lang;
console.log(lang);
let link = document.getElementById("fb");
if(lang == 'ar'){
link.href += '/ar'
} else if(lang == 'en'){
link.href += '/en'
}
<a id="fb" href= "www.facebook.com">Facebook</a>
You can try this =>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<a id = "ar">Facebook AR</a>
<a id = "en">Facebook EN</a>
<script>
var ar = document.getElementById("ar").setAttribute("href", "www.facebook.com/ar");
var en = document.getElementById("en").setAttribute("href", "www.facebook.com/en");
</script>
</body>
</html>
but it is better to use like this, if not it may be some console errors
var ar = document.getElementById("ar") ? document.getElementById("ar").setAttribute("href", "www.facebook.com/ar") : null;
var en = document.getElementById("en") ? document.getElementById("en").setAttribute("href", "www.facebook.com/en") : null;
Related
Here is an example from the book "DOM Scripting: Web Design with JavaScript and the Document Object Model." I don't know why it's not working. When I click on the list, the pictures should be changed in the placeholder. But now they only open in the window.
Thank you!
window.onload = prepareGallery;
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this) ? false : true;
}
}
}
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if (placeholder.nodeNae != "IMG") return false;
placeholder.setAttribute("src", source);
if (document.getElementById("description")) {
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return true;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>Flower</li>
<li>Building</li>
<li>Cold Day</li>
<li>Sunset</li>
</ul>
<p id="description">Choose an Image.</p>
<img src="images/placeholder.png" alt="my image gallery" id="placeholder" style="border: 2px solid #eaeaea">
</body>
</html>
So I looked up the ebook. didn't want to buy it to answer a question, but I took a look at the source code and couldn't find what chapter you'd be on to be using just this code. from what it looks like it, I can only guess you're on chapter 6, so take a look at the example JS script for that chapter, it works fine. also, you have a syntax error on line 38 of your code "documnet" should probably be document. Would have made this a comment but couldn't.
The issue is if (placeholder.nodeNae != "IMG") return false; nodeNae should be nodeName. Not sure why the snippet wasn't throwing an error.
window.onload = prepareGallery;
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this) ? false : true;
}
}
}
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if (placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src", source);
if (document.getElementById("description")) {
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return true;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>Flower</li>
<li>Building</li>
<li>Cold Day</li>
<li>Sunset</li>
</ul>
<p id="description">Choose an Image.</p>
<img src="images/placeholder.png" alt="my image gallery" id="placeholder" style="border: 2px solid #eaeaea">
</body>
</html>
This code seems pretty outdated so I'm going to write a newer one.
const is a block scoped variable that cannot have the value altered and cannot be redeclared. Docs
.querySelector and .querySelectorAll return either a DOM object or a NodeList of matching nodes respectively. Docs
Since gallery_images is a NodeList that means we can iterate over it with .forEach. In the forEach I am using an Arrow Function as shorthand for assigning the event listener to the a element.
.forEach(image => image.addEventListener('click', showImage)) is the same as .forEach(function() { this.addEventListener('click', showImage); }.
If anything is confusing I can try and clarify it some more. I've linked to the docs for additional information.
const gallery = document.querySelector('#imagegallery');
const gallery_images = document.querySelectorAll('#imagegallery a');
const placeholder = document.querySelector('#placeholder');
gallery_images.forEach(image => image.addEventListener('click', showImage));
function showImage(event) {
event.preventDefault(); // Stop the link from opening
const source = this.href;
const title = this.title;
placeholder.src = source;
placeholder.alt = title;
}
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>Flower</li>
<li>Building</li>
<li>Cold Day</li>
<li>Sunset</li>
</ul>
<p id="description">Choose an Image.</p>
<img src="images/placeholder.png" alt="my image gallery" id="placeholder" style="border: 2px solid #eaeaea">
I want to save the text selected by the user in a variable in my chrome extension. For this, I use document.getSelection() method.
I have the global variable "theText". When I select some text, in the first and second log I have the text I selected. That's ok. But in the third log, I lost the value of my variable. Why? I read a lot about the scope in JavaScript, but I think my variable is global, so I don't understand why I lost my value.
The "definitionPopup" is an id of my toolbar in HTML.
Can you help me? I'm noobie here.
Thanks!
This is my js file:
var theText;
window.addEventListener('mouseup', function(){
var text = getSelectionText()
console.log(text.length);
if (text.length > 0){ // check there's some text selected
theText = text;
console.log("Second log theText " + theText);
}
}, false);
function getSelectionText(){
var selectedText = "";
if (document.getSelection()){
selectedText = document.getSelection().toString();
if(selectedText.length > 0){
theText = selectedText;
console.log("First test theText " + theText);
}
}
return selectedText;
}
$(document).ready(function(){
//Call deninion service
$("#definitionPopup").click(function(e){
console.log('Third test theText '+ theText);
...
});
my toolbar.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/services/option-selected.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="toolbar">
<ul class="nav navbar-nav">
<li id="searchTextPopup"><input type="text" name="search" placeholder="Buscar..."></li>
<li id="definitionPopup">Definiciones</li>
<li id="synonymPopup">Palabras parecidas</li>
<li id="antonymPopup">Palabras distintas</li>
<li id="imgPopup">Pictogramas</li>
<li id="youtubePopup" ><a href="#" >Youtube</a></li>
</ul>
</div>
</body>
</html>
add-toolbar.js I create my iframe
var height = '60px';
//var iframe = document.createElement('iframe'); //the "error" is here.
//I create div instead of iframe
var iframe = document.body.createElement('div');
iframe.setAttribute("id", "customToolbarMenu");
//iframe.src = chrome.extension.getURL('../toolbar.html'); //change this
//for this
$("#customToolbarMenu").load(chrome.extension.getURL('../toolbar.html'));
document.documentElement.appendChild(iframe);
var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';
I'm new to javascript
I've created this code and it almost works.
The href works but how do I put the fixed phonenumber between the a href taggs?
document.write does not work.
Any ideas?
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
function fix(nummer) {
var nieuw = nummer.replace(/\D/g,'');
var output = document.getElementById("nummer");
var href = 'http://10.0.1.151/?call=' + nieuw;
output.setAttribute("href", href);
output.document.write(nieuw);
}
</script>
<label>Typ telefoonummer</label><input id="telefoon" style="margin-left: 30px" type="text" onblur="fix(this.value)" />
<span><a target="_blank" id="nummer">Call [how do I get the fixed number here??]</a></span>
</body>
</html>
Set the innerText property of the element.
output.innerText = "Call "+nummer;
Use element.textContent:
document.getElementById('nummer').textContent = "Call " + nummer;
innerText is an IE thing.
var phoneNum = document.getElementById('number');
phoneNum.innerHTML=("Call " + phoneNumberToCall); //Could also use phoneNum.innerText
Say I have the following JavaScript in a HTML page
<html>
<script>
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
</script>
<body>
<a href = test.html>I need the value of "splitText" variable here</a>
</body>
</html>
How do I get the value of the variable "splitText" outside the script tags.
Thanks!
<html>
<script>
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
window.onload = function() {
//when the document is finished loading, replace everything
//between the <a ...> </a> tags with the value of splitText
document.getElementById("myLink").innerHTML=splitText;
}
</script>
<body>
<a id="myLink" href = test.html></a>
</body>
</html>
Try this :
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
$("#target").text(splitText);
});
</script>
<body>
<a id="target" href = test.html></a>
</body>
</html>
<html>
<head>
<script>
function putText() {
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
document.getElementById("destination").innerHTML = "I need the value of " + splitText + " variable here";
}
</script>
</head>
<body onLoad = putText()>
<a id="destination" href = test.html>I need the value of "splitText" variable here</a>
</body>
</html>
In raw javascript, you'll want to put an id on your anchor tag and do this:
<html>
<script>
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
function insertText(){
document.getElementById('someId').InnerHTML = splitText;}
</script>
<body onload="insertText()">
I need the value of "splitText" variable here
</body>
</html>
Here you go: http://codepen.io/anon/pen/cKflA
Although, I must say that what you are asking to do is not a good way to do it. A good way is this: http://codepen.io/anon/pen/jlkvJ
The info inside the <script> tag is then processed inside it to access other parts. If you want to change the text inside another paragraph, then first give the paragraph an id, then set a variable to it using getElementById([id]) to access it ([id] means the id you gave the paragraph).
Next, use the innerHTML built-in variable with whatever your variable was called and a '.' (dot) to show that it is based on the paragraph. You can set it to whatever you want, but be aware that to set a paragraph to a tag (<...>), then you have to still put it in speech marks.
Example:
<!DOCTYPE html>
<html>
<body>
<!--\|/id here-->
<p id="myText"></p>
<p id="myTextTag"></p>
<script>
<!--Here we retrieve the text and show what we want to write...
var text = document.getElementById("myText");
var tag = document.getElementById("myTextTag");
var toWrite = "Hello"
var toWriteTag = "<a href='https://stackoverflow.com'>Stack Overflow</a>"
<!--...and here we are actually affecting the text.-->
text.innerHTML = toWrite
tag.innerHTML = toWriteTag
</script>
<body>
<html>
I have an issue and i want to see if someone can help me...
I'm using a PAGEFLIP downloaded from: http://pageflip.hu/ on this project that is inside of a JOOMLA article: http://estudiantes.iems.edu.mx/index.php?option=com_k2&view=item&id=334
MY ISSUE IS THAT I CAN SEE THE PAGEFLIP ONLY ON CHROME AND SAFARI BUT IT DOESN'T RUN ON IE AND FIREFOX, this is not a problem with compatibility, cause it runs on local on Firefox and IE...
I was searching and i think that the issue comes out when I change the URL... This is the ORIGINAL CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>PageFlip4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/pageflip_scalable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.XMLFileName = "pageflipdata.xml";
flashvars.DataFolder = "pageflipdata/";
if (swfobject.getQueryParamValue("page")) {
flashvars.StartPage = swfobject.getQueryParamValue("page");
} else {
flashvars.StartPage = "1";
}
flashvars.StartAutoFlip = "true";
flashvars.AutoStart = "true";
var params = {};
params.scale = "noscale";
params.salign = "TL";
params.wmode = "transparent";
params.allowscriptaccess = "always";
params.allowfullscreen = "true";
params.menu = "true";
params.bgcolor = "#FFFFFF";
var attributes = {};
swfobject.embedSWF("pageFlip.swf", "pageflip", "100%", "100%", "10.0.0", false, flashvars, params, attributes);
</script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox++.js" type="text/javascript"></script>
<script type="text/javascript">
function GroupDelegate(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}
function LightboxDelegate(url,caption) {
var objLink = document.createElement('a');
objLink.setAttribute('href',url);
objLink.setAttribute('rel','lightbox');
objLink.setAttribute('title',caption);
Lightbox.prototype.start(objLink);
}
</script>
</head>
<body>
<div id="pageflip" style="margin: 0;"></div>
<a id="group1" href="pageflipdata/pages/demo_page_A.png" rel="lightbox[demoGroup1]" title="Page A, group Called from PageFlip Hotspot"></a>
<a id="group2" href="pageflipdata/pages/demo_page_B.png" rel="lightbox[demoGroup1]" title="Page B, group Called from PageFlip Hotspot"></a>
<a id="group3" href="pageflipdata/pages/demo_page_C.png" rel="lightbox[demoGroup1]" title="Page C, group Called from PageFlip Hotspot"></a>
</body>
</html>
I can't see it on Firefox and IE When I change the URL from this SCRIPT lines (this is my code online):
<script type="text/javascript">
var flashvars = {};
flashvars.XMLFileName = "pageflipdata.xml";
flashvars.DataFolder = "http://estudiantes.iems.edu.mx/cired/swfs/ae/fl/noumeno/obj/pageflipdata/";
if (swfobject.getQueryParamValue("page")) {
flashvars.StartPage = swfobject.getQueryParamValue("page");
} else {
flashvars.StartPage = "1";
}
flashvars.StartAutoFlip = "true";
flashvars.AutoStart = "true";
var params = {};
params.scale = "noscale";
params.salign = "TL";
params.wmode = "transparent";
params.allowscriptaccess = "always";
params.allowfullscreen = "true";
params.menu = "true";
params.bgcolor = "#FFFFFF";
var attributes = {};
swfobject.embedSWF("http://estudiantes.iems.edu.mx/cired/swfs/ae/fl/noumeno/obj/pageFlip.swf", "pageflip", "100%", "100%", "10.0.0", false, flashvars, params, attributes);
</script>
So, what i think is incorrect is the way i write it, kind of syntax issue.
Somebody has an idea of what can i try to solve this. Thank you so much! ;)
Try giving full path for XML
or can use HTML like