JavaScript getElementById not Working - javascript

I need help with this code if someone is willing to help. I cannot get the 2 getElementById functions to work and I am a beginner so I am sure it is something simple but I have not been able to fix it. I need to click on the text to change the font. Any help in the right direction will be greatly apprecited. Please check the code below.
<?xml version = "1.0" encoding = "utf-8"?>
<!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">
<head>
<title>Solution Page 486 Exercise 12.7</title>
<style type = "text/css">
.option { color: darkblue }
.graybg { background-color: #aaaaaa }
.whitebg { background-color: #ffffff }
.sans { font-family: sans-serif }
.serif { font-family: serif }
</style>
<script type = "text/javascript">
function bodyClass(color)
{
document.body.className = color;
}
</script>
</head>
<body>
<div id = "main">Click on Options Listed Below to see how they modify this page.<br ><br >
<div>Options:
<div onclick = "bodyClass('graybg');"
class = "option">Gray background</div>
<div onclick = "bodyClass('whitebg');"
class = "option">White background</div>
<div onclick = "document.getElementById(" class
= "option" classname ="sans" ? main?).>Sans-serif text</div>
<div onclick = "document.getElementById(" class
= "option" classname ="serif" ? main?).>Serif text</div></div></div>
</body>
</html>

The syntax of getElementById is:
document.getElementById('the_id_of_an_element')
You have:
document.getElementById(
You need to give it an argument and include the closing ). You then probably want to do something with the return value.

Do not write JavaScript in a string assigned to an 'onclick' property. Write it in a function in a tag and assign the function,here is the code:
<body>
...
<div id='an_id'> <!-- doesn't have to be a div, any element is OK -->
...
<script type='text/JavaScript'>
var some_elem = document.getElementById( 'an_id' );
some_elem.onclick = my_func; // no parens, no quotes!
function my_func() {
// your code goes here
// in here, 'this' refers to the element that got the click
}
</script>
</body>
Hope this will help.

document.getElementById itself says it fetch element by Id but not by class or any other attributes, this should work document.getElementById('main')

You didn't understand how getElementById works:
<html>
<head>
<script type="text/javascript">
function onButtonClick() {{
document.getElementById( "main" ).innerHTML = "html of div main has changed!";
};
</script>
</head>
<body>
<div id="main">This is the initial text</div>
<button onclick="onButtonClick();">Click me</button>
</body>
</html>
save the above code as "test.html", load it in a browser, click button, see effect.
<div id="main"> <= id="main" means that you give an identifier to the "div" element, when you call "document.getElementById", you need to pass the value of "id", in this case "main".

Related

Javascript replace text function

This is my javascript for replacing some text:
document.body.innerHTML = document.body.innerHTML.replace(/Sometext/g, 'difference');
Ho do I change color, font-size, font and such?
I need to link my script like this, can't use { otherwise:
<script>$(document).ready($.getScript("url"));</script>
I though something like this would work:
window.onload = function() {
document.body.innerHTML =
document.body.innerHTML.replace(/Deckling/g, result);
}
var str = "The Liberator";
var result = str.fontcolor("Red").italics().fontsize(6);
result.style.fontFamily = "Harrington";
Any help? (first post and very limited Knowledge)
You can wrap you text in a div or span tag, select it in JS applying a class.
The class will contains the style for your text.
Just a quick example in vanilla javaScript (no jquery):
http://jsbin.com/yufiteseme/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
color:red;
font-style: italic;
font-size: 6px;
{
</style>
<script>
function changeColor(){
document.getElementById('text').classList.add('a');
}
</script>
</head>
<body onload="changeColor()">
<div id="text">
Test for example
</div>
</body>
</html>
You can change style of an html element using javascript, put your script below the element.
The following example changes the style of a 'p' element using javascript:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").style.color = "red";
document.getElementById("p1").style.fontFamily = "Arial";
document.getElementById("p1").style.fontSize = "larger";
</script>
</body>
</html>
You can also change style of an html element using jquery.
The following example changes the style of a 'p' element using jquery:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#p1').ready(function(){
$('#p1').css({"color": "green"}).css({"fontFamily": "Arial"}).css({"fontSize": "24px"});
});
</script>
</head>
<body>
<p id="p1">Hello World!</p>
</body>
</html>
That will not work:
var result = str.fontcolor("Red").italics().fontsize(6);.
You need to add css to change the surface.Add this to your header:
.textstyle{
font-size:16px;
font-family:Harrington;
}
</style>
And add this to your window.onload:$('body').addClass('textstyle');

how to send the parameter to the javascript function in HTML?

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>

Cannot change styles dynamically in CFLayoutArea

I have been writing ColdFusion/JS for 15 years, and this has me totally baffled!
I can run javascript to do anything inside my CFLayoutArea, but it will not let me display or change the styles in JS.
When you load the dashboard.cfm page in the layoutarea, it gives an javascript error anytime you try to change or reference (display) any style attribute related to the div element.
Here is the calling page:
function dashBoard() {
ColdFusion.navigate('dashboard.cfm','content');
}
<cflayout>
<cflayoutarea>
<cfdiv id="content" />
</cflayoutarea>
</cflayout>
Here is dashboard.cfm:
<html>
<head>
<style>
#szliderbar1{
width:37%;
}
</style>
<script>
displayProgress = function() {
var tttt = document.getElementById('szliderbar1');
alert(tttt.style.width);
}
</script>
</head>
<body>
<div id="szliderbar1"> hey
</div>
</body>
</html>
<cfset ajaxonload("displayProgress")>

How do I replace a bit of text with string variable in javascript?

I know this is a really simple question, but I need to replace this bit of text in a paragraph with a variable every time an even fires.
The markup looks like this
"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" />
<title>Untitled Document</title>
<style>
#container {width:100%; text-align:center; }
#heading {width:100%; text-align:center; }
</style>
</head>
<div id="heading">
<h1>hello</h1>
</div>
<body>
<div id="container">
<textarea name="mytextarea" cols="60" rows="40"></textarea>
</div>
</body>
</html>
What I need is where it says "hello" in the tags, is for that to be a variable that van be replaced by a string that I will generate.
You could create a function that looks something like this.
function replaceTitle (replaceText) {
document.getElementById("heading").getElementsByTagName("h1")[0].innerHTML = replaceText;
}
If you are using jQuery it could look more like this.
function replaceTitle (replaceText) {
$("#heading h1").html(replaceText);
}
Then you call the function like this
replaceText(yourVariable);
It would probably be better to give your <h1> tag an id or a class so you can reference it directly, but I am going to assume that you have good reason for not doing so.
One example on how can be simple things made complicated :)
javascript:
// simple way:
function replace_text(text) {
var heading = document.getElementById('heading');
heading.innerHTML = '<h1>' + text + '</h1>';
}
// complicated way:
function replace_text2(text) {
var heading = document.getElementById('heading');
var node = heading.childNodes[0];
while ( node && node.nodeType!=1 && node.tagName!='H1' ){
//console.log(node.nodeType,node);
node = node.nextSibling;
}
if (node) {
node.replaceChild(document.createTextNode(text),node.childNodes[0]);
}
}
html:
<input type="button" onclick="replace_text('HELLO 1!');" value="Replace 1st text" />
<input type="button" onclick="replace_text2('HELLO 2!');" value="Replace 2nd text" />
The script is here.

Trouble in passsing form object to javascript from an hyperlink

All
<input type ="button" value ="test" onClick="SelectAll(this.form);" />
<script ......>
function SelectAll(form)
{
alert(form);
}
</script>
method 1 produce an alert message 'undefined' while 2 method works fine by displaying form object . I'm very much aware that anchor elements don't have a form property, that references the form , unlike input elements,but is there any alternative way to pass form object using hyperlink or is there any way to style the button to look like an hyperlink
Thanks
Try this...
onClick="SelectAll(getParentForm(this));"
function getParentForm(el) {
while(el = el.parentNode) {
if(el.tagName.toLowerCase() === "form")
return el;
}
return null;
}
Since the anchor is not a form control, it doesn't have a form property. You would need to find some other way to reference the form (or stick to a button, which is the right choice of control for something like this).
Honestly? I think your best approach is to not use an anchor element at all. It's not really a link, so that's actually a misuse of HTML.
Use a button element instead, which does have a form property. If you really want it to look like a link, slap on a little CSS to make it look like one.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
button.link {
border: none;
background-color: transparent;
color: blue;
margin: 0;
padding: 0;
cursor: pointer;
text-decoration: underline;
}
</style>
<script type="text/javascript">
function SelectAll( f )
{
alert( f );
}
</script>
</head>
<body>
<form id="test">
<button class="link" onclick="SelectAll(this.form)">All</button>
</form>
</body>
But there are probably a dozen other ways to get a reference to the form element itself. If your form definition looked like this
<form id="test" name="tester">
and it's the only form on the page, here are some ways to obtain a reference to it
document.forms.tester
document.forms['tester']
document.forms[0]
document.getElementById( 'test' )

Categories