|
JavaScript - Inserting A Hyperlink Or An Image With Innerhtml
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>"
}
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 Hey everyone, I'm struggling to get this to work, I have a countdown timer with the timer itself declared as, 'out'. This is then set as the content for a div using: Code: document.getElementById(iid).innerHTML=out; My code basically says, if the countdown timer hasn't finished, do the above, if however it has reached the end, set the contents of the div to something else. What I need to do is add an image above the timer which disappears with it when it reaches 0, so essentially, I need to be able to do something like the following (except obviously in the correct syntax, if it exists). Quote: document.getElementById(iid).innerHTML="<img src='images/dateheader.png'><br>" out; Is this possible? Thanks hi everyone, firstly to call myself a noob would be inflating my ego. I have done one project in javascript so far and have had no schooling on the topic, however I have learned quite a lot in the last few months from this thing called the 'internet'. So far I managed to make an html image map that has various tooltips which will appear onmouseover, and the tooltip disappears onmouseout. Each point of coords that i have defined has a hyperlink to a different page on the internet. It works just like i wanted it to and i couldn't be happier, that is, when i'm using a mouse... When i am using a touchscreen device it is a different story. specifically i'm trying to port my html page to android as i figured it would be easy with the android sdk and webview (it was, but read on). What i found when i used the 'app' on my phone was that onmouseover works when you touch the screen, however it also registers as a click, so pop goes the tooltip, and i'm whisked away to my webpage. not the desired result. Ideally I would like to hold down the screen for 3 seconds and then the hyperlink would activate, but i decided that just getting the thing functional would suffice for the time beaing so i tried to include some 'ondblclick' that would trigger a document.location. This worked fine on a web browser again, but had no result on the touchscreen. I decided to abandon this half step because I have read that ondblclick doesn't work in an image map and it isn't my intended result anyway. I have found a lot of javascript and jquery samples that emulate the onHold event that i'm trying to achieve, both on this forum and all over the internet, however these samples are overly complex and are focused on looping an action, such as incrementally increasing a value or zooming or whatever. I just want to redirect the user to another page if they trigger 'onmousedown' for 3 seconds. anybody want to trade some help for a thankyou? 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';
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();
}
}
}
}
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>
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. How would you make a if for a input box =this do this Some if the input boxe value = this then get innerHTMl 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. Hello. I have created a form via innerhtml, like this: content.innerhtml = "<form action =\"customer.php\" method=\"post\">"; content.innerhtml = "<input type = \"text\" name = \"Username\" />"; content.innerhtml = "<input type = \"submit\" value = \"Submit\" />"; When I click submit, instead of running the php file, nothing happens. I tested it outside the script and it works just fine. Is there any other way I can make this work inside the script? Thank you. How would you make a case statment that creates a button without reloading the page??
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> Hello. I have the following: bottomCell.innerHTML = "apples 0"; bottomCell.innerHTML.replace("apples", "oranges", "gi"); The first line works fine, the second one doesn't. In the end, I want it to replace all instances of the numerical variable named myNumber to the string "t" + newNumber (where newNumber is another numerical variable) but neither this, nor the above mentioned line work. Any ideas? Thanks! I'm working on a script that inserts things into tables. It's complicated and involves xmlhttp and lots of stuff, but I've narrowed the problem down to something simple. The following code does not work in IE. It doesn't generate an error, but simply displays nothing. Here is the code: Code: <body>
<table id="test">
</table>
<script type="text/javascript">
document.getElementById('test').innerHTML = '<tr><td>test<\/td><\/tr>';
</script>
</body>
I have no idea why it isn't working as it works in Safari and Firefox. Help is much appreciated. Julian Hello all. I'm new here and new to JavaScript. Ive got a snippet of code that's not working. Can you guys help me out? The code is the following: Code: function image()
{
var image = document.getElementById('add_image');
image.style.height = '30px';
image.innerHTML = '<div style="margin:5px; width:520px; height:20px;" id="add_images"><input type="file" name="pic" /></div>';
}
The first half of the function is working, but the second half isn't. I originally tried style.visibility = 'visible' but that didn't work so I try innerHTML. Since that didn't work either, I've decided to seek help. Thanks ahead of time. I can't seem to get my innerHTML to display my content. This works fine, if I was to put it all in one line. Code: document.getElementById('addedText').innerHTML = '<table><tr><td>'+"My text goes here"+'</tr></td></table>';
If I was to break it up, which I wanted then nothing seem to show up. Code: document.getElementById('addedText').innerHTML = '<table><tr><td>';
document.getElementById('addedText').innerHTML = "My text goes here";
document.getElementById('addedText').innerHTML = '</tr></td></table>';
Here's my code Code: <html>
<head>
<script type="text/javascript">
function display() {
document.getElementById('addedText').innerHTML = '<table border=1><tr><td>';
document.getElementById('addedText').innerHTML = "My text goes here";
document.getElementById('addedText').innerHTML = '</tr></td></table>';
}
</script>
</head>
<body onload="display()">
<div id="addedText"></div>
</body>
</html>
thanks |
|||||||