Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I'm trying to make a script that adds a link to a div in the onload and for some reason the content (images) is displayed as written html text. Why is that and how can I correct it?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function AffiliateLink() {
var boxes = document.getElementsByClassName('AffiliateLink'),
i = boxes.length;
while (i--) {
var link = document.createElement('a');
var content = document.createTextNode(boxes[i].innerHTML);
link.setAttribute('href', boxes[i].getAttribute('title'));
link.appendChild(content);
boxes[i].innerHTML = '';
boxes[i].appendChild(link);
}
}
</script>
</head>
<body onload="AffiliateLink()">
<div class="AffiliateLink" title="http://www.google.com">Google</div>
<div class="AffiliateLink" title="http://www.apple.com"><img src="http://files.softicons.com/download/application-icons/black-icons-by-mike-demetriou/png/128x128/App%20apple%20logo.png"></a></div>
</body>
The document.createTextNode forces the HTML to be text. Just copy one innerHTML to the other.
http://jsfiddle.net/86fWM/1/
while (i--) {
var link = document.createElement('a');
link.setAttribute('href', boxes[i].getAttribute('title'));
link.innerHTML = boxes[i].innerHTML;
boxes[i].innerHTML = '';
boxes[i].appendChild(link);
}
Because that's explicitly what a textNode is that you're creating, it explicitly handles everything you give it as text and does not interpret the HTML. If you want to set HTML content, use the innerHTML attribute:
link.innerHTML = boxes[i].innerHTML;
It's debatable whether you may want to simply clone or move the boxes[i] node instead though instead of assigning one innerHTML to another.
Because you are creating a text node containing html tags, so they are treated as text and not html.
You can easily fix that by replacing
var link = document.createElement('a');
var content = document.createTextNode(boxes[i].innerHTML);
link.setAttribute('href', boxes[i].getAttribute('title'));
link.appendChild(content);
by
var link = document.createElement('a');
link.setAttribute('href', boxes[i].getAttribute('title'));
link.innerHTML = boxes[i].innerHTML;
More then one way to the target. the "create text node" made text node. replacing it with innerHTML will make the next code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function AffiliateLink() {
var boxes = document.getElementsByClassName('AffiliateLink'),
i = boxes.length;
while (i--) {
var a = document.createElement('a');
var content = boxes[i].innerHTML;
a.href = boxes[i].title;
a.innerHTML = content;
boxes[i].innerHTML = '';
console.log (i);
boxes[i].appendChild(a);
}
}
</script>
</head>
<body onload="AffiliateLink()">
<div class="AffiliateLink" title="http://www.google.com">Google</div>
<div class="AffiliateLink" title="http://www.apple.com"><img src="http://files.softicons.com/download/application-icons/black-icons-by-mike-demetriou/png/128x128/App%20apple%20logo.png"></a></div>
</body>
</html>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
<!Doctype html>
<html>
<title>JavaScript Tutorial</title>
<body>
<script language = "javascript">
var cleanCities = ["Cheyenne ","Santa Fe ","Tucson ","Great Falls ","Honolulu"];
var cityToCheck = "Tucson";
if(cityToCheck === cleanCities[i]) {
alert("You are clean");
}
</script>
</body>
</html>
I cannot find the errors
it's a javascript code
<!Doctype html>
<html>
<title>JavaScript Tutorial</title>
<body>
<script language = "javascript">
var cleanCities = ["Cheyenne ","Santa Fe ","Tucson ","Great Falls ","Honolulu"];
var cityToCheck = "Tucson";
if(cityToCheck === cleanCities[i]) {
alert("You are clean");
}
</script>
</body>
</html>
It says there is some problem in line 14
Where is your for loop for which you're an index i? If its removed intentionally then Tucson in your array has a space in the end. Use trim method.
Also language = "javascript" is wrong, its usually type="text/javascript"
The code should be like below:
enter code here
var cleanCities = ["Cheyenne ","Santa Fe ","Tucson ","Great Falls ","Honolulu"];
var cityToCheck = "Tucson";
for(var i=0; i<cleanCities.length; i++) {
if(cityToCheck === cleanCities[i].trim()){
alert('you are clean');
}
}
I have been struggling with this so hopefully someone can help!
So I am looking to change the inner html of a paragraph to another html element containing a div and script when my frame receives a message from the page code. I have this working only for when the inner html is set to replace with a normal string
like this
document.getElementById('demo').innerHTML = "testing" ;
the correct replacement shows up here
<p id="demo">testing</p>
but when I try and pass in the other html to replace that section like this:
document.getElementById('demo').innerHTML =
'<div id="tlkio" data-channel="regerhtrh" data-theme="theme--night" style="width:100%;height:400px;"></div><script async src="https://tlk.io/embed.js" type="text/javascript"></script>';
it does not work. I don't think it is a quotation issue because I wrapped the outsides of it with single quotes. not sure what else to try. Below is the full html and I would appreciate any help!
<!doctype html>
<html>
<head>
<script type="text/javascript">
function init () {
// when a message is received from the page code
window.onmessage = (event) => {
if (event.data) {
console.log("HTML Code Element received a message!");
insertMessage(event.data);
}
}
}
// display received message
function insertMessage(msg) {
document.getElementById('demo').innerHTML =
'<div id="tlkio" data-channel="regerhtrh" data-theme="theme--night" style="width:100%;height:400px;"></div><script async src="https://tlk.io/embed.js" type="text/javascript"></script>'
;
}
</script>
</head>
<body onload="init();" style="background-color:lightgray;">
<h1>HTML Component Test</h1>
<p id="demo">
should put html here
</p>
</body>
</html>
The major issue is the </script> closing tag in your code. It closes YOUR block, not the block you are inserting.
You have to do so:
var myHtml = "<div id='tlkio' data-channel='regerhtrh' data-theme='theme--night' style='width: 100%; height:400px;'></div><script async src='https://tlk.io/embed.js' type='text/javascript'></scr"+"ipt>";
Second, script you insert with innerHTML wont run. Use document.createElement('script') instead
UPDATE
Here is the jsFiddle: https://jsfiddle.net/ArtyomShegeda/62fdybc0/21/
You may consider swapping the Quotes used:
function insertMessage(msg) {
var myHtml = "<div id='tlkio' data-channel='regerhtrh' data-theme='theme--night' style='width: 100%; height:400px;'></div><script async src='https://tlk.io/embed.js' type='text/javascript'></script>";
document.getElementById('demo').innerHTML = myHtml;
}
This may add it, yet may not render it. You might consider creating the elements and appending them.
function insertMessage(msg) {
var tlkio = document.createElement("div");
tlkio.style.width = "100%";
tlkio.style.width = "400px";
tlkio.setAttribute('data-channel', 'regerhtrh');
tlkio.setAttribute('data-theme', 'theme--night');
var tlkScript = document.createElement("script");
tlkScript.src = 'https://tlk.io/embed.js';
tlkScript.type = 'text/javascript';
tlkScript.async = true;
document.getElementById('demo').append(tlkio, tlkScript);
}
Based on some research here: load scripts asynchronously, it may be best to append the script to the <head>.
Hope that helps.
Update 1
Per your fiddle, once updated, it is working as you suggested: https://jsfiddle.net/Twisty/62fdybc0/7/
The following is added to #myDIV element:
<div style="width: 100%; height: 400px;" data-channel="regerhtrh" data-theme="theme--night"></div><script src="https://tlk.io/embed.js" type="text/javascript" async="async"></script>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I am a beginner in Javascript. I am doing some exercises and coming across the error listed above for the 'onclick'.
I have looked at other questions on this forum and it has not be helpful for me. I have looked over syntax numerous times in both my html and JS and can't find anything!
var item1;
var item2;
var item3;
document.getElementById("changeList").onclick = newList;
function newList() {
item1 = prompt("Enter a new first thing:");
item2 = prompt("Enter a new second thing:");
item3 = prompt("Enter a new third thing:");
updateList();
}
function updateList() {
document.getElementById("firstThing").innerHTML = item1;
document.getElementById("secondThing").innerHTML = item2;
document.getElementById("thirdThing").innerHTML = item3;
}
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Practice</title>
<script src="main.js"></script>
</head>
<body>
<h1 id="myName">Angie</h1>
<hr>
<p id="aboutMe"><em>I am trying to learn this damn javascript and stick with it.</em></p>
<h2>Things I like</h2>
<p>Here are some of the things I like to do:</p>
<ul>
<li id=firstThing>Dance</li>
<li id=secondThing>Write</li>
<li id=thirdThing>Travel</li>
</ul>
<button id="changeList" type="button">Change Your List</button>
</body>
</html>
You can try placing your script tag at the bottom of the page as suggested by lealceldeiro or you can wait for the DOM to load fully before adding your event listener for onclick like so:
//Replace this line
document.getElementById("changeList").onclick = newList;
//With the following, this fires an event when the DOM has fully loaded
//This will ensure your element has been rendered into the DOM
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("changeList").onclick = newList;
});
Try changing your html line to :
<button id="changeList" type="button" onclick = newList();>Change Your List</button>
and remove this line from your JS
document.getElementById("changeList").onclick = newList;
I'm trying to create two separate HTML documents: main.html and sufler.html. Idea is to control sufler.html page from main.html . So far I succeeded to write text and change it's font style. But font style changes only ONE time...
I need it to be able to change many times, can't understand what is going on,
because, as I understanding, every time I calling function writing(), I'm clearing all new document's content with newDoc.body.innerHTML = ''... but it seems that not... although text is changing every time.
main.html
<html>
<head>
<script type="text/javascript">
var HTMLstringPage1 = '<!DOCTYPE html><html><head><link href="stilius.css" rel="stylesheet" type="text/css" /></head><body>',
HTMLstringPage2 = '</body></html>',
HTMLstringDiv1 = '<div id="sufler"><div id="mov"><p id="flip">',
HTMLstringDiv2 = '</p></div></div>';
//NEW WINDOW OPEN--------------------------------------------------------------------------------------------------------
var newWindow = window.open('suffler.html','_blank','toolbar=no, scrollbars=no, resizable=no, height=615,width=815');
var newDoc = newWindow.document;
newDoc.write(HTMLstringPage1,HTMLstringDiv1+'Text'+HTMLstringDiv2,HTMLstringPage2);
var script = newDoc.createElement("script");
script.type = "text/javascript";
//=======================================================================================================================
//WRITING----------------------------------------------------------------------------------------------------------------
function writing(){
newText = document.getElementById("sel-1").value.replace(/\n/gi, "</br>");
fontas= document.getElementById("textFont").value;
size= document.getElementById("textSyze").value;
stylas= document.getElementById("textStyle").value;
syntax= document.getElementById("textSyntax").value;
newDoc.body.innerHTML = '';//clears old text (should clear old scripts and functions too)
newDoc.write(HTMLstringPage1,HTMLstringDiv1,newText,HTMLstringDiv2,HTMLstringPage2);//writes new text (and new scripts and functions)
var text = newDoc.createTextNode('document.getElementById("flip").style.font="'+stylas+' '+syntax+' '+size+'px '+fontas+'";');
script.appendChild(text);
newDoc.getElementsByTagName("body")[0].appendChild(script);
}
//=======================================================================================================================
</script>
</head>
<body>
<button type="button" style="background-color: #F5FF25;" onclick="writing()">Apply text</button>
</body>
</html>
Any one node can only be added to the document once. You only define script once but trying to add it to the DOM multiple times. Put the var script = ... line inside writing().
I have the following tag in HTML:
<div data-dojo-type="dojox.data.XmlStore"
data-dojo-props="url:'http://135.250.70.162:8081/eqmWS/services/eq/Equipment/All/6204/2', label:'text'"
data-dojo-id="bookStore3"></div>
I have the values 6204 and 2 in a couple of global variables in the script section:
<html>
<head>
<script>
...
var newNeId = gup('neId');
var newNeGroupId = gup('neGroupId');
...
</script>
</head>
</html>
Is it possible to have these variables in the div tag in the HTML body? If so, how?
To clarify this a bit more, I need to have the URL in the tag something like this:
url: 'http://135.250.70.162:8081/eqmWS/services/eq/Equipment/All/'+newNeGroupId+'/'+newNeId
I changed it according to your requirement:
<html>
<head>
<script type="text/javascript">
// example data
var newNeId = 10;
var newNeGroupId = 500;
window.onload = function(e){
var myDiv = document.getElementById("myDiv");
myDiv.setAttribute("data-dojo-props", "url:'http://135.250.70.162:8081/eqmWS/services/eq/Equipment/All/" + newNeId + "/" + newNeGroupId + "', label:'text'");
}
</script>
</head>
<body>
<div id="myDiv" data-dojo-type="dojox.data.XmlStore"
data-dojo-props="url:'http://135.250.70.162:8081/eqmWS/services/eq/Equipment/All/6204/2', label:'text'"
data-dojo-id="bookStore3"></div>
</body>
</html>
You could add them to the <div> using the same datalist pattern (MDN docu) as Dojo:
<div id="savebox" data-newNeId="6204" data-newNeGroupId="2"></div>
These attributes are then accessible by the element.dataset.itemName.
var div = document.querySelector( '#savebox' );
// access
console.log( div.dataset.newNeId );
console.log( div.dataset.newNeGroupId );
As #EricFortis pointed out, the question remains, why you want to do this. This only makes sense, if you pass those values on from the server side.
Take one parent div then set its id and then you can rewrite whole div tag with attributes using innerHTML.
document.getElementById('id of parent div').innerHTml="<div data-dojo-type=/"dojox.data.XmlStore/"
data-dojo-props=/"url:'http://135.250.70.162:8081/eqmWS/services/eq/Equipment/All/6204/2', label:'text'/"
data-dojo-id=/"bookStore3/"></div>";
you can append values you wants in innerhtml now.
here's simple native js code to do it
var body = document.getElementsByTagName('body')[0];
var myDiv = document.createElement('div');
myDiv.setAttribute('id', 'myDiv');
var text = 'newNeId: ' + newNeId +
'<br/> newNeGroupId: ' + newNeGroupId';
body.appendChild(myDiv);
document.getElementById('myDiv').innerHTML = text;