Jump to content

Search the Community

Showing results for tags 'innerHTML'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 12 results

  1. Hello & Thanks; Here is a ' mini-Tutorial: moving text to & from <textarea> & <pre> ' http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html I'll also put code here for safekeeping : <!DOCTYPE html> <html> <head> <!-- https://www.freeformatter.com/html-validator.html http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html --> <title id="titleId"></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <style> </style> </head> <body onload="documentURL() , onloadRestoreTextarea()" > <br> <button onclick="saveAs(filename, allHtml)">Save This Page</button> <br><br> <div id="inlineDiv" style="display: inline-block;"> <div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;"> <button onclick="sendToConcoleLog ()">sendToConcoleLog</button> <br><br> <textarea id="toConsoleLogId" rows="4" cols="12">:</textarea> </div> <div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;"> <button onclick="saveItAll()">Copy this into PRE</button> <br> <textarea class="copyFrom" rows="4" cols="12"></textarea> </div> <div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;"> <button onclick="restoreItAll()">Restore this from Pre</button> <br> <pre contenteditable="true" class="pasteInto" ></pre> </div> </div> <!-- id="inlineBlock"> --> <div style="border-style: dotted; align-text: center; border-width: 1px;"> <pre> Thought I would make a turorial so I remember what I learned from you all , and to pass on your wisdom. Hope this helps someone :) Try this: ------------------------------------------------------------------------------------------------------------------------ 1) Type something into "Copy this into Pre" textarea box . Then click "Copy this into Pre" Button . Text is copied into "Restore this from Pre" "pre area ' . And "Copy this into Pre" textarea box , is Cleared . Study This : function saveItAll() ------------------------------------------------------------------------------------------------------------------------ 2) The click on "Restore this from Pre" Button , Text is copied from "Restore this from Pre" area into "Copy this into Pre" area . And "Restore this from Pre" area , is Cleared . Study This: function restoreItAll() ------------------------------------------------------------------------------------------------------------------------ 3) Now Type something into "Copy this into Pre" textarea box Again . Then click "Copy this into Pre" Button . Text is copied into "Restore this from Pre" pre area . And "Copy this into Pre" textarea box , is Cleared . But this time , click the "Save This Page" Button . Study This: function saveAs(filename, allHtml) This .html page will be saved in your Browser's download area . Since the "Restore this from Pre" pre area , is coded as contenteditable="true" , the downloaded page will save the "pre area" text as innerHTML . A nifty feature of 'contenteditable' is that upon opening the saved-page the content of "pre area" is now " hardCoded " into page . Study This: function onloadRestoreTextarea() ------------------------------------------------------------------------------------------------------------------------ See code : So in the ' body ' tag we have : "onloadRestoreTextarea()" which runs the " function onloadRestoreTextarea() " code , when page is loaded . Which copies text from "pre area" to " textarea" box . Also at ' body onload="documentURL() ' page load time: The function: function documentURL() is run , which copies ' this .html ' file's address into the ' title ' tag . BTW: for example (see code) and note that : IF you want to copy what’s typed in the box use .value . console.log(toConsoleLogId.value); IF you want what was hardcoded into the text box’s HTML , use .innerHTML . console.log(toConsoleLogId.innerHTML); Hope this helps someone.... http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html </pre> </div> <script> var copyFromVar = "one"; function saveItAll() { var blankVar = ""; var fromList; // = document.getElementsByClassName("copyFrom"); var intoList; // = document.getElementsByClassName("pasteInto"); fromList = document.getElementsByClassName("copyFrom"); intoList = document.getElementsByClassName("pasteInto"); for (var i = 0; i < fromList.length; i++) { copyFromVar = fromList[i].value ; intoList[i].innerHTML = copyFromVar; fromList[i].innerHTML = blankVar; fromList[i].value = blankVar; } }// </script> <script> var copyFromVarTwo = "two"; function restoreItAll() { var blankVar = ""; var fromListTwo; // = document.getElementsByClassName("copyFrom"); var intoListTwo; // = document.getElementsByClassName("pasteInto"); intoListTwo = document.getElementsByClassName("copyFrom"); fromListTwo = document.getElementsByClassName("pasteInto"); for (var i = 0; i < fromListTwo.length; i++) { copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; fromListTwo[i].innerHTML = blankVar; fromListTwo[i].value = blankVar; } } </script> <script> var copyFromVarOnload = "three"; function onloadRestoreTextarea() { var fromListTwo; // = document.getElementsByClassName("copyFrom"); var intoListTwo; // = document.getElementsByClassName("pasteInto"); var blankVar = ""; intoListTwo = document.getElementsByClassName("copyFrom"); fromListTwo = document.getElementsByClassName("pasteInto"); for (var i = 0; i < fromListTwo.length; i++) { copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; fromListTwo[i].innerHTML = blankVar; fromListTwo[i].value = blankVar; } } // reloadTextarea </script> <script> function sendToConcoleLog() { var var01 = toConsoleLogId.value; console.log(var01); // alert(var01); var var01 = toConsoleLogId.innerHTML; console.log("If nothing after : Then no nothing was typed into this textarea => " + var01); alert("If nothing after : Then no nothing was typed into this textarea => " + var01); console.log(toConsoleLogId.value); console.log(toConsoleLogId.innerHTML); /* should be console.log(toConsoleLogId.value); if you want what’s typed in the box, or console.log(toConsoleLogId.innerHTML); if you want what was hardcoded into the text box’s HTML. */ } </script> <script> var filename = ""; function documentURL() { document_URL = document.URL; document.getElementById("titleId").innerHTML = document_URL; } </script> <script> var filename = "Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore.html"; var allHtml = document.documentElement.outerHTML; function saveAs(filename, allHtml) { allHtml = document.documentElement.outerHTML; var blob = new Blob([allHtml], {type: 'text/csv'}); if(window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveBlob(blob, filename); } else{ var elem = window.document.createElement('a'); elem.href = window.URL.createObjectURL(blob); elem.download = filename; document.body.appendChild(elem); elem.click(); document.body.removeChild(elem); } } </script> </body> </html>
  2. Hello! I have a map in my website and when I click on it, if there is a feature, it shows its information. This information is written by an innerHTML and currently it looks like that: if (feature) { var objeto = feature.getProperties(), propiedades; var propiedades; content.innerHTML = ""; for (propiedades in objeto){ content.innerHTML += propiedades + ':' + objeto[propiedades] + "<br />"; } return container.style.display = 'block'; } else { return container.style.display = 'none'; } So the info is shown ok but a little untidy. So I would like to show this info with a table. propiedades contains the name of the data and objeto[propiedades] their values. Could anybody tell me how to do it or give me an example please? Thank you in advance!
  3. I am making a website to get Radio frequencies from Microsoft Flight Simulator through Simconnect on my computer. I would like to get the FREQ from FSX and convert them to 0, 1, 2, 3 decimal places. Ill give a example below and explain it. I want to set COM1 Freq to 3 decimal places 130.250 but where do i put the toFixed(3) at in the code. Gets COM1 Active frequency from FSX <SCRIPT src="../jquery-1.7.1.js"></script><script src="sprintf.js"></script> <script type="text/javascript"></script> function body_onload() {var jqXHR;jqXHR = $.getJSON("http://" + location.hostname + "/add_definition?definition_name=RADIO&name=COM1_A&PropertyName=COM ACTIVE FREQUENCY:1&UnitName=MHz&DatumType=FLOAT32", function(data) {});} Sets variable for it function get_values() {var C1A = document.getElementById("COM1_AD");C1A.innerHTML = definition_data.COM1_A;} Displays the data <BODY onload="body_onload()"><P>COM 1 Active is: <SPAN id="COM1_AD"></SPAN></P></BODY>
  4. When I run the following code and submit, the page flashes (about 1 second) with the modified html and then disappears. Is it something to do with the function? <!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Learning Java Script</title></head><body><form id="choice" onsubmit="decision();">Logo or text? <input type="text" id="c1"><input type="submit" value="Enter"></form><p id="display"></p><script>function decision() {var answer = document.getElementById("choice").value;var replace = document.getElementById("display");if (answer === "text") {replace.innerHTML = document.createTextNode("<p>some text</p>");}else {replace.innerHTML = document.createTextNode("<img src="gr8oz2.0.png" alt="">");}return false;}</script></body></html>
  5. Hi W3, this array-within-array should print out Students 1, 2, 3 and their averaged grades, but it's only printing out Student 3 & average, and no console errors. It works fine substituting console.log, so the problem is my innerHTML part. Thanks in advance for direction. document.addEventListener("DOMContentLoaded", function(){var grades = [[89, 77, 78], [76, 82, 81], [91, 94, 89]];var total = 0;var average = 0.0;for (var row = 0; row < grades.length; row++){ for (var col = 0; col < grades[row].length; col++){ total += grades[row][col];} average = total / grades[row].length; divid = document.getElementById("nice"); divid.innerHTML = 'Student ' + parseInt(row+1) + 'average: ' + average.toFixed(2); total = 0; average = 0.0;}});
  6. I've got a multi-tab web form that works just fine on Internet Explorer (Versions 10 and 11) but not on Firefox (Version 27). I've got the problem narrowed down to two (2) javascripts. They both have a common set of commands that may well be the cause of this problem. The common command is "document.getElementById('Frame or Tab ID').innerHTML". Although I've got it narrowed down to this source, I have no idea why it is happening or what I can do to fix it. I'd like to get this form to work on both platforms (i.e., IE and Firefox). Does anyone have any suggestions?
  7. westman


    hi all, I am using ... function iteminfo(theinfo) {var infoitem1 = theinfo;outinfoitem = document.getElementById("info_of_news");outinfoitem.innerHTML = infoitem1;} to pass a string (readable text for users) but the string i am passing has a character limit. how do i up the limit so i can send a paragraph of text instead of a sentence?
  8. I am working on a website for a video game streamer I watch and sometimes he plays with other streamers and viewers want to watch them both or in some cases more than 2, all play at the same time. So there are sites that do "dual streams" that will allow you to show both videos on the same page. My idea was to make something similar but scale-able to however many streams are needed. So far I have js functions with all the HTML needed add the video player but not sure how i would add a new video to the page without having to refresh. I am using the document.getElementByID('streams').innerHTML = mainStream()+newStream(); right now to manually show the primary stream and a image to click on to add another stream. function mainStream() { result = "\t<div id=\"stream1\" class=\"td stream\">\n"+ "\t\t<object type=\"application/x-shockwave-flash\" class=\"stream-object\" data=\"http://www.twitch.tv/widgets/live_embed_player.swf\" width=\"100%\" height=\"100%\" style=\"visibility: visible; \">\n"+ "\t\t<param name=\"allowFullScreen\" value=\"true\">\n"+ "\t\t<param name=\"allowScriptAccess\" value=\"always\">\n"+ "\t\t<param name=\"allowNetworking\" value=\"all\">\n"+ "\t\t<param name=\"wmode\" value=\"transparent\">\n"+ "\t\t<param name=\"flashvars\" value=\"hostname=www.twitch.tv&channel=the_black_russian&auto_play=true&start_volume=100\"></object>\n"+ "\t</div>\n"; return(result); } function newStream(streamNum) { result = "\t<div id=\"stream"+streamNum+"\" class=\"td newStream\" onclick=\"getStream()\">\n"+ "\t\t<img src=\"lib/new_stream.fw.png\" style=\"width:100%; height:100%\" alt=\"new stream\" title=\"Click to open a new stream...\" />\n"+ "\t</div>\n"; return(result); } In hard code it would look like this when printed: <div id="streams"> <div id="stream1" class="td stream" style="width: 301px; height: 169.3125px;"> <object type="application/x-shockwave-flash" class="stream-object" data="http://www.twitch.tv/widgets/live_embed_player.swf" width="100%" height="100%" style="visibility: visible; "> <param name="allowFullScreen" value="true"> <param name="allowScriptAccess" value="always"> <param name="allowNetworking" value="all"> <param name="wmode" value="transparent"> <param name="flashvars" value="hostname=www.twitch.tv&channel=the_black_russian&auto_play=true&start_volume=100"></object> </div> <div id="stream2" class="td newStream" onclick="getStream()" style="width: 301px; height: 169.3125px;"> <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream..."> </div></div> What I am looking to do is when someone triggers getStream() for it to add another stream and list the newStream() code last. This would make the new stream #2 and push the open a new stream part to stream #3. I also would like to add in functionality to close a specific stream. Any help is much appreciated! If I did not explain enough please let me know I will try my best to fill in any details I may have missed.
  9. Currently I'm learning Ajax with Java.The innerHTML method works when I'm retrieving simple string data from the servlet, and when I need to update only one HTML element.Since I have the need to update more HTML elements it occurred to me that I can use JSON object with several properties (HTML tag data for each element needed updating).After trying that I've noticed that innerHTML method doesn't work, when I try to process the retrieved data in the Callback function.My question is, why is this happening?Did someone had a similar problem when using JSON with Javascript.Just for the record, when I use innerText method I successfully update the HTML elements with JSON properties data, only they update as text and that's what I don't need. (See the video) Thank You.
  10. Hi there, I have recently been trying some code out to replace the innerHTML contents from within a table row, i am now to discover that Internet Explorer which a lot of people still use insists of making innerHTML properties read only, although the code works flawlessly in Firefox and Google Chrome. The code i have currently got is shown below: document.getElementsByTagName("tr").innerHTML = document.getElementsByTagName("tr").innerHTML.replace(document.getElementsByTagName("tr").cells[j].childNodes[0].id,nameandid).replace(document.getElementsByTagName("tr").cells[j].childNodes[0].name,nameandid).replace(document.getElementsByTagName("tr").cells[j].childNodes[2].id,calendarid).replace(document.getElementsByTagName("tr").cells[selecttdid].childNodes[0].name,selectname); As you can see from the above code i am trying to tell a tag name TR which has an index of i innerHTML to change to itself but with some things replaced. You don't need to know what i am replacing inside the code as that code is all fine. What i would like to know is, what work around do i have to change the innerHTML using Javascript or JQuery? Some people have said to stick it into a Div tag but the problem is that the table is inside of a form and i am sending the elements from a form to a different page and so i would rather keep it inside the table row. I have also read that innerHTML can be used to modify specific cells from within a table i.e. contents inside a TD tag. Does anybody know how i can modify my code accordingly so that the debugger stops spitting out the "operation" error messages when i put debugging on due to trying to write to innerHTML? I have also tried using outerHTML and didn't seem to work either: document.getElementsByTagName("tr").outerHTML.replace(document.getElementsByTagName("tr").innerHTML,document.getElementsByTagName("tr").innerHTML.replace(document.getElementsByTagName("tr").cells[j].childNodes[0].id,nameandid).replace(document.getElementsByTagName("tr").cells[j].childNodes[0].name,nameandid).replace(document.getElementsByTagName("tr").cells[j].childNodes[2].id,calendarid).replace(document.getElementsByTagName("tr").cells[selecttdid].childNodes[0].name,selectname)); You will notice in the above i am trying to replace the innerHTML of an element(a TR tag at number i) with some things removed and again, because i am trying to modify the innerHTML...it was a no go again. Finally i have tried to modify a value property in internet explorer and this time it spits out a 5007 error saying that it is unable to set the value of the property, anybody know how i can get around this? My code again for this is below to what i currently tried: document.getElementById("unitstartdate"+totaltablerows).value = startdate; The ID's do exist and again this code worked fine in firefox and chrome, just not IE. I think i am more after a work around for both situations rather than you understanding what i am actually trying to replace etc. as the replace part of the code is fine, just will not write to HTML in Internet explorer using innerHTML, outerHTML or change a value of an element as mentioned. Any ideas are great. Mark
  11. This is my first time using so much Javascript, (and I have no idea what I'm doing) but it's for an assignment. We're supposed to make a website for a fictional restaurant, and part of the requirement is to create a "reservation form", in which times and dates are selected using a drop-down box or radio buttons. Then, the selected time and date appear as text after submitting using innerHTML on the same page. I found some code that helps, but each time I submit, it returns one of the values but not the other! I don't know if the code I'm using is even the best way to approach it, and most of the innerHTML tutorials don't really show what I want it to do. I'll break it up with the Javascript section, and then in the Body section. <script>function changeText(){var userInput = document.getElementById('selDays').value;var userInput = document.getElementById('selTimes').value;document.getElementById('text1').innerHTML = userInput;document.getElementById('text2').innerHTML = userInput;return false; }</script> Second half: <h4>Make a Reservation!</h4><p><label>First Name:<input type="text" id="fname" name="fname"></label><br><label>Phone:<input type="text" id="phone" name="phone"></label><br><label>Email:<input type="text" id="email" name="email"></label><br><p><form name="frmDays" method="get"onsubmit="return changeText()"> <Select name="selDays" id="selDays"> <option>Select a Day</option> <option>Monday</option> <option>Tuesday</option> <option>Wednesday</option> <option>Thursday</option> <option>Friday</option> <option>Saturday</option> </Select> <p><form name="frmTimes" method="get"onsubmit="return changeText()"> <Select name="selTimes" id="selTimes"> <option>Select a Time</option> <option>10 AM</option> <option>11 AM</option> <option>12 PM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> </Select> <input type="submit" value="Send" /><p>Your reservation is <b id='text1'>Day</b> at <b id='text2'>Time</b> </p> </form> Again, if there is a better way to do this, I'd be more than happy to hear it. Thanks!
  12. The following adapted code taken from this page works in firefox (and I assume some other browsers), but it does not work in internet explorer. The specific part, which stops the script entirely in IE is highlighted in red bold below. Is there a work around to solve this problem so that I can change the content of a style sheet dynamically - using onClick etc Thanks as always for your time. <html><head> <style id="poo" readonly=false>#myAnchor{color:green}</style><script type="text/javascript">function changeLink(){document.getElementById('poo').innerHTML="#myAnchor{color:red}"; document.getElementById('myAnchor').innerHTML="W3Schools";document.getElementById('myAnchor').href="http://www.w3schools.com";document.getElementById('myAnchor').target="_blank";}</script></head><body> <a id="myAnchor" href="http://www.microsoft.com">Microsoft</a><input type="button" onclick="changeLink()" value="Change link"> </body></html>
  • Create New...