|
JavaScript - Inserting Text With Innerhtml
Hello,
I need your help, I would to like to insert some styled text into an HTML document using innerHTML and a Div. What would be the code to insert some text with a different font, size and color? Any help is appreciated. Thanks, J Similar TutorialsI'm trying to insert a form into a div, based on what the user selects in another select form. I'm getting an error whenever I try typing my code. I'm doing this in Dreamweaver and it highlights my text green (starting at the first /td and ending at the next / of the next /td) Will adding this form even function properly when I send? Any ideas on what's going on? Thanks Code: function showTable(y) {
if(y == "readers") {
document.getElementById("next").innerHTML = "<form id='readersTable'>
<table>
<tr>
<td>Attribute 1</td> <td><input type='text' name='at1'> </td>
</tr>
</table>
</form>"
}
Hi all, Hope you can help with the following. I'm trying to change the contents of DIV2 when I click on DIV1. The following code doesn't work for some reason. I'm using Windows 7 (64-bit), and testing on Firefox 3.6.8 and IE8. Code: <html>
<head>
<script type="text/javascript" language="javascript">
function test() {
document.getElementById("test2").innerHMTL="hello";
}
</script>
</head>
<body>
<div id="test1" style="border: 1px solid #ff0000; width: 200px; height: 100px;" onclick="test();">Test Box 1</div>
<div id="test2" style="border: 1px solid #ff0000; width: 200px; height: 100px;">Test Box 2</div>
</body>
</html>
Any help appreciated, Cheers Sean Hi all, I'm a JavaScript newbie and I am trying to create a situation where a user clicks a button, a popup is launched in which they have a textarea to enter some text. Once they hit submit, the popup should disapear and a certain text element on the previous page should be updated to show what they entered. Its like this, but obviously it wouldn't be on the same page: http://www.tizag.com/javascriptT/jav...-innerHTML.php - updating text based on user input. I have the popup part working just fine: index.php Code: <script type="text/javascript">
<!--
function editText() {
sList = window.open("editText.html", "list", "width=300,height=300");
}
// -->
</script>
which is triggered by an onclick="editText()" however I can seem to figure out how to update the box with the text they enter in the popup part. I'm sure it is something do with innnerHTML. editText.html Code: <script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p>
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>
Can anybody help me out here? Many thanks Hi im new to this site and im a begginer, so forgive me for any grammatical errors please. How would I go about running a program onclick or onblur and displaying the result on same page without it changing? I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get: Code: Foo bar frog becomes: Code: Foo <b>bar</b> frog I found some code that works for firefox, but I need it to work in explorer as well. Do you have any ideas or examples how to do this? Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. ) Usage: Code: <a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>
insert function: Code: <script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
var caretPos = textarea.caretPos, temp_length = caretPos.text.length;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;
if (temp_length == 0)
{
caretPos.moveStart("character", -text2.length);
caretPos.moveEnd("character", -text2.length);
caretPos.select();
}
else
textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
var begin = textarea.value.substr(0, textarea.selectionStart);
var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var newCursorPos = textarea.selectionStart;
var scrollPos = textarea.scrollTop;
textarea.value = begin + text1 + selection + text2 + end;
if (textarea.setSelectionRange)
{
if (selection.length == 0)
textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
else
textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
textarea.focus();
}
textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
textarea.value += text1 + text2;
textarea.focus(textarea.value.length - 1);
}
}
</script>
Hey there everybody, Seems I need help again. Still trying to learn the ways of the javascript. So here is my dilemma: I have a text field and some buttons below it. When I click on the button it insert the text for it into the text field. However, in order for that text to display in the text field a second time in a row I have to click on the text field and then click on the button again. What I would like to be able to do is to click on the button several times in a row so that it inserts the text again and again without having to click on the text field to reselect it. What's wrong with this script that is causing it to work that way? What can I do to fix it? By the way, I will be coupling this code with a popup code. The popup code, which works perfectly fine, has buttons in it as well and insert that text into the main window text area repeatedly. I just need some buttons on my main window that do the same thing. I hope the explanation makes sense. With all of this playing around, I know I'll get the hang of it eventually. I hope. . . Any help is greatly appreciated. Code: <html>
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
}
</script>
<body>
<form>
<textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea><br /><br />
<input type="button" value="Hi" onclick="insert(window.lstText,'Hi')">
<input type="button" value="Bye" onclick="insert(window.lstText,'Bye')">
<br />
</form>
</body>
</html>
I have been using just basic text lately and now convert them to smiles when it is ECHO'd on the page later on when the page is viewed again. but with to know how to insert them by clicking the images.
Hi guys, Hopefully a really quick question. I'm a JS novice, and am looking for a way to output the coordinates of a Google maps marker into the value of two text fields, one for latitude and one for longitude. The code below is a simple location search which returns a result with a draggable marker. Currently, the coordinates in both text fields update when the location search is performed, but not when the marker is dragged to a new location afterwards. Does anyone know the code to simply update the coordinates each time the marker is dropped on a new location? Code: <html>
<head>
<style type="text/css">
#map_canvas {
width:444px;
height:444px;
overflow:hidden;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA-Kl-tQOj5PlnOlXQmp2N9hTg6Fn61x9hOlvMvn6kV4ENK8yRfBShRuj-nulocuk2Alx9JmFKKV4zwA" type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(52.8068752, -1.6430344),6);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.enableScrollWheelZoom();
geocoder = new GClientGeocoder();
// Update current position info
}
// addAddressToMap() is called when the geocoder returns an
// answer. It adds a marker to the map with an open info window
// showing the nicely formatted version of the address and the country code.
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Whoops, we couldn't find that address!");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point,{draggable:true});
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address + '<br /><span class="smallgrey">Zoom in and drag the marker to exactly where the point is</span>');
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
}
}
// showLocation() is called when you click on the Search button
// in the form. It geocodes the address entered into the form
// and adds a marker to the map at that location.
function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}
// findLocation() is used to enter the sample addresses into the form.
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
</script>
</head>
<body onload="initialize()">
<form action="#" onsubmit="showLocation(); return false;"><input type="text" name="q" size="35" /> <input type="submit" name="find" value="Search"/></form>
<div id="map_canvas">And pin the <strike>tail</strike> marker on the <strike>donkey</strike> map:<br /></div>
Latitude: <input class="required" type="text" name="latitude" id="latitude" value="53.34870686020199" /> <br />
Longitude: <input class="required" type="text" name="longitude" id="longitude" value="-6.267356872558594" />
</body>
</html>
Many thanks in advance, I appreciate anyone who wants to help out! Can somebody explain me why this isn't working? Code: <SCRIPT TYPE="TEXT/JAVASCRIPT">
// Check lotto
var goed = frmTrekking.EersteGetal.value
var fout = frmGetallen.Opgegeven_1.value
function checkLotto() {
if (frmTrekking.EersteGetal.value == frmGetallen.Opgegeven_1.value) {
document.getElementById('boldStuff').style.color='#00ff00';
document.getElementById('boldStuff').innerHTML = goed;
}
else {
document.getElementById('boldStuff').style.color='#ff0000';
document.getElementById('boldStuff').innerHTML = fout;
}
}
</script>
When I don't use the var, but give for example this: it works ok. Code: document.getElementById('boldStuff').innerHTML = '6';
How would you make a if for a input box =this do this Some if the input boxe value = this then get innerHTMl Hey, for some reason, this isn't working because of the src="images/edit.png" attribute. Here is my code: Code: <a href="#" onclick="change('HEYYY')"><img src="images/edit.png" alt="Edit" id="edit1" /></a>
Javascript (External) Code: function change(message)
{
document.getElementById('edit1').innerHTML = '<input type="text" value="'+message+'" />';
}
It does nothing. But if I take the src attribute out, it works fine. Any help? Thanks. Hello, I am a newbie for Javascript. Currently I am doing a website which consists of a lot of contents. Therefore, I hope to get a solution which all my contents are arranged into a table (rows and columns). The condition is that there is only a html page to hold all the contents where there is a "view more" or 'next" button at the bottom and each times user can click to go to the different contents. I have tried to use the innerHTML and I was able to do for 2 pages only...Now I encountered a problem which I need to update more contents to more pages . Can you kindly give some guidelines according to this? Below shows the example code of my website: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
function OpenWindow()
{
var content=document.getElementById('achieve').rows[0].cells;
content[1].innerHTML="<br/><div align='justify' class='style1 style8'><span class='style11'>Another content</span></div>" + "<div align='left' class='style23 style13'>more details</div>";
var content=document.getElementById('achieve').rows[1].cells;
content[1].innerHTML="";
var content=document.getElementById('achieve').rows[2].cells;
content[1].innerHTML="<strong><em><font class=style13 style23 color=#FF6600><a href='test.html'>back</a></font></em></strong>";
}
</script>
</head>
<body>
<!--id starts-->
<table id="achieve" width="780" height="387" border="0">
<tr>
<td width="10" height="39"> </td>
<td width="340"><div align="center" class="style6">My Title</div></td>
<td width="416"> </td>
</tr>
<tr>
<td> </td>
<td><div align="justify" class="style1 style8"><span class="style11">More Contents here</span></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><div align="right"><strong><em><font class="style23 style13" color="#FF6600"><a href="#" onclick="OpenWindow()">+ view more </a></font></em></strong></div></td>
<td> </td>
</tr>
</table>
</body>
</html>
Does anyone have any suggestions as to how I can get IE working properly with this? It's a, (exempting IE), straight forward line numbering and plain text code view function. When using the line numbering portion, it works fine in Moz based browsers etc, as it does in IE for the initial numbering. On trying to remove the numbers though, (on the second call), IE just seems to cascade the list entries rather than removing them. Code: function process_code(id, number, print)
{
if (document.getElementById(id))
{
var current = document.getElementById(id);
var code = current.innerHTML.split('\n');
var count = 0;
var xcount = 0;
if (number)
{
if (current.innerHTML.indexOf('<li class="code-entry">') != -1)
{
code = code.join('\n');
code = code.replace(/\<\/(li\>\<\/ol|li)\>/ig, '\n');
code = code.replace(/\<ol\>\<li[^\>]+\>|\<li[^\>]+\>/ig, '');
current.innerHTML = code.replace(/^\n+|\n+$/g, '');
}
else
{
current.innerHTML = '<ol><li class="code-entry">'+code.join('</li><li class="code-entry">')+'<
/li></ol>';
}
}
else
{
var doc = window.open('', 'code_print');
var newdoc = doc.document;
newdoc.open('text/plain');
newdoc.write(decode_code(code.join('\n')));
newdoc.close();
if (print)
{
if (navigator.userAgent.indexOf('Opera') != -1)
{
window.print();
}
else
{
doc.print();
}
doc.close();
}
}
}
}
Hi. I've created a test page with loads of comments on the source, as this is quite hard to explain. phurley.co.uk/test.php - (if you select 'specific date', this is the one i'm trying to get working for now) Basically, I have a text box that when selected makes a calendar pop up. This works fine, but I am now making the html for the text box be produced via innerHTML in a JS function (with select boxes and a case/break), and the pop up no longer works. I've tried all night to get this working but my JS skills are letting me down. If you could take the time to have a look at the source code it would be very very much appreciated. thank you Ok I want to be able to include a html file into my template. I want the php include to work when I press a button that will put the include into a specific element with the document.getElementById("").innerHTML method in javascript. I want the include to be able to be more then a single line. For example I want to be able to write my code like this <div> some text </div> and not have to write it like this <div>some test</div> Thanks Shelby hi, i have a problem with innerHTML if i wrote document.getElementById('someid').innerHTML = "ok"; then it wroks but when i wrote document.getElementById('someid').innerHTML = "<sometext> ok"; it does not work. i.e. <sometext> is not visible if check on firebug / dom it display.. <sometext> ok </sometext> please help.. how do i print / display above string as it as. you may download file or check below link.. please click here Hello. I'm trying to change the text on my page dynamically using getElementById etc. Just not quite sure how to do it. Code: <script>
function changeIt() {
document.getElementById('change').innerHTML = '*i want the stuff below here (from 'var' to 'text')*';
}
var Result= ((correct / 5) * 100) + '%';
document.write('<p>Result<b>' + score + '</b></p>');
document.write('<p>some text</p>');
</script>
//
<div id = "change">
*all the info I'm going to replace*
</div>
Just need to know how to put the variables and stuff in the 'innerhtml' part? Thanks. I trying to display a random number using innerHTML Here's my code: Code: <html>
<head>
<script language="JavaScript">
var myArray = new Array("String1", "String2", "String3", "String4", "String5", "String6", "String7", "String8", "String9", "String10");
var num = Math.floor(myArray.length * Math.random());
document.writeln(myArray[num]);
//document.getElementById("myString").innerHTML = myArray[num];
</script>
</head>
<body>
<div id="myString"></div>
</body>
</html>
it works when I use document.writeln(myArray[num]); but does NOT work for document.getElementById("myString").innerHTML = myArray[num]; any ideas?? tks Hi there, Ive check the following code in all major browser and it works fine accept ofcourse in IE. Im trying to take the innerHTML from one row and move it to the one above or below depand on the button you are clicking. Does anyone have any idea? Many thanks mkariti <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> TABLE { border-collapse: collapse; } TBODY { border-top: solid black 1px; } TR { border-bottom: solid black 1px; } </style> <script type="text/javascript" language="javascript"> var getId; var row = { selected: -1, hoverColor: '#CCCCCC', defaultColor: '#FFFFFF', onclick: function (trow, id) { getId = id; var r = document.getElementById('row_' + row.selected); if (row.selected != -1 && r) r.bgColor = row.defaultColor; row.selected = id; trow.bgColor = row.hoverColor; }, test: function (num) { var table = document.getElementById("tableId"); var getRowLength = document.getElementById("tableId").rows.length; if (num == 1) { // table.rows[getId].parentNode.insertBefore(table.rows[getId], table.rows[getId - 1]); // getId++; var tempDown = document.getElementById("row_" + getId).innerHTML; document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId + 1)).innerHTML; document.getElementById("row_" + getId).bgColor = row.defaultColor; document.getElementById("row_" + (getId + 1)).innerHTML = tempDown; document.getElementById("row_" + (getId + 1)).bgColor = row.hoverColor; getId++; } else { // getId--; // table.rows[getId].parentNode.insertBefore(table.rows[getId + 1], table.rows[getId]); var tempUp = document.getElementById("row_" + getId).innerHTML; document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId - 1)).innerHTML; document.getElementById("row_" + getId).bgColor = row.defaultColor; document.getElementById("row_" + (getId - 1)).innerHTML = tempUp; document.getElementById("row_" + (getId - 1)).bgColor = row.hoverColor; getId--; } } } </script> </head> <body> <div> <table id="tableId"> <tbody> <tr id="row_1" onclick="row.onclick(this,1);"><td><input type="checkbox"></td><td>Row 1</td><td>A</td></tr> <tr id="row_2" onclick="row.onclick(this,2);"><td><input type="checkbox"></td><td>Row 2</td><td>B</td></tr> <tr id="row_3" onclick="row.onclick(this,3);"><td><input type="checkbox"></td><td>Row 3</td><td>C</td></tr> <tr id="row_4" onclick="row.onclick(this,4);"><td><input type="checkbox"></td><td>Row 4</td><td>D</td></tr> <tr id="row_5" onclick="row.onclick(this,5);"><td><input type="checkbox"></td><td>Row 5</td><td>E</td></tr> </tbody> </table> </div> <div> <button id="btn_down" onclick="row.test(1)">Down</button> <button id="btn_up" onclick="row.test(2)">Up</button> </div> </body> </html> |
|||||||