Printing object property in an html paragraph - javascript

I should get an output of "Peter" in the paragraph with id="para1", but somehow, this is not happening. Can someone help me out?
<html>
<head>
</head>
<body>
<p id=para1></p>
<script>document.getElementById('para1').innerHtml = alpha.name;</script>
<script>
var alpha = {name:"Peter",age:23,gender:"male"};
</script>
</body>
</html>
I've changed the code to this, still cannot see the word "Peter" in the html screen:
<html>
<head></head>
<body>
<p id=para1></p>
<script>
var alpha = {name:"Roshan",age:23,gender:"male"};
document.getElementById('para1').innerHtml = alpha.name;
</script>
</body>
</html>

There are two mistake you have.
First: <p id=para1></p> id must have " like <p id="para1"></p>
Second: innerHTML not innerHtml
Check your updated code here:
var alpha = {name:"Roshan",age:23,gender:"male"};
document.getElementById('para1').innerHTML = alpha.name;
<p id="para1"></p>

Your main mistake is innerHtml instead innerHTML. But all your code is not good formatted.
Let's change your code
<p id="para1"></p>
<script type="text/javascript">
var alpha = {name:"Roshan",age:23,gender:"male"};
document.getElementById('para1').innerHTML = alpha.name;
</script>

You're trying to call the object before it exists. Either change your script around, or use window.onload:
<script type="text/javascript">
window.onload = function(){
var alpha = {name:"Roshan",age:23,gender:"male"};
document.getElementById('para1').innerHTML = alpha.name;
};
</script>
This makes sure that the page is fully loaded before the scripts gets executed.
This is by far the best and safest solution, but if you rather leave it to "load as you go", then changing the order would (perhaps) be sufficient:
<p id="para1"></p>
<script type="text/javascript">
var alpha = {name:"Peter",age:23,gender:"male"};
document.getElementById('para1').innerHTML = alpha.name;
</script>
Edit:
Also, as others mentioned - it's .innerHTML. Javascript is case sensitive.

<html>
<body>
<p id="para1"></p>
<script>
var alpha = {name:"Peter",age:23,gender:"male"};
document.getElementById('para1').innerHTML = alpha.name;
</script>
</body>
</html>

Related

How can I make a variable be the select Id in a getElement

How can I make a variable be the select Id in a getElement? When I tried it, it returned null. My code is shown below:
<html>
<head>
</head>
<body>
<p id = "test">hi</p>
<script>
var test = "test";
document.getElementById(test).innerHTML = "complete";
</script>
</body
</html>
That code seems to work just fine (with the exception of the unclosed body tag), here is a runnable version of the code, fixed:
<html>
<head>
</head>
<body>
<p id = "test">hi</p>
<script>
var test = "test";
document.getElementById(test).innerHTML = "complete";
</script>
</body>
</html>
Remember, the js code is going to happen almost immediately, so you won't be able to see the "hi" part. If you want it to change after like 1 second, use this:
<html>
<head>
</head>
<body>
<p id = "test">hi</p>
<script>
var test = "test";
setTimeout(function () {
document.getElementById(test).innerHTML = "complete";
}, 1000);
</script>
</body>
</html>
All I changed in that, is put the document.getElementById() into a setTimeout
Hope this helped.

Using <script> tag within editable email notification dialog in Jenkins

I am writing this simple html in the editable email notification dialog box:
<!DOCTYPE html>
<html>
<body>
<p id="demo"> </p>
<script type="text/javascript">
document.getElementById("demo").innerHTML = "this is from JS";
</script>
</body>
</html>
However I am unable to see the string " this is from JS" in the generated email. Not sure what am I doing wrong ? Any pointers?
You have your JS, but it seems that you never call it.
Try running in a load or ready function.
<script type="text/javascript">
window.onload = function() {
document.getElementById("demo").innerHTML = "this is from JS";
};
$( document ).ready(function() {
document.getElementById("demo").innerHTML = "this is from JS";
});
</script>
I think this is what you are trying to do.
UPDATE:
Alright, I found another function that will work for you. here is the the FIDDLE.
<body>
<p id="demo"></p>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("demo").innerHTML = "this is from JS";
});
</script>
</body>

can any one explain and provide the correct the code?

The HTML file has:
<html>
<head>
<title>title</title>
<script style="text/css" src=".\Scripts\CSS\tryc.css"></script>
<script style="text/javascript" src=".\Scripts\JavaScripts\Text8.js"></script>
</head>
<body id="body">
<h1 id="heading1">Coming Soon</h1>
<object id="circle-svg" width="1300" height="560" type="image/svg+xml" data=".\Scripts\svg\ulti.svg"></object>
</body>
</html>
The JavaScript has
window.onload = function () {
var as = document.getElementById("body");
var as1 = as.getElementById("heading1");
as1.style.color = "blue";
alert(as1);
alert("try");
};
The text does not turn blue.
getElementById must always be called from a document object.
var as = document.getElementById("body");
var as1 = as.getElementById("heading1");
var as1 = document.getElementById("heading1");
No nested context is needed, because IDs must be unique within the document.
And FWIW, you can use document.body instead of putting an ID on the body.
Oh, also you should use forward slashes instead of backslashes to get your script.
<script type="text/javascript" src="./Scripts/JavaScripts/Text8.js"></script>
I dont think you can use
as.getElementById();
Why dont you go directly with:
as = document.getElementById('heading1');
as.style.color = 'blue';

Use javascript substring to specify character length

I have a heading on my webpage that I want to limit to a certain number of characters. The
heading is for a blog post so the title changes. This is essentialy what I want to accomplish.
<body>
<script>
var x= document.getElementById("entry-title");
document.write(x.substring(0,10));
<script>
<h1 id="entry-title">This is a sample blog title</h1>
</body>
try that
<body>
<script>
window.onload =
function (){
var x= document.getElementById("entry-title");
x.innerText = x.innerText.substring(0,10);
}
</script>
<h1 id="entry-title">This is a sample blog title</h1>
</body>
There the code with jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
</head>
<body>
<script>
$(document).ready(
function (){
var text = $("#entry-title").text();
var x= $("#entry-title").text(text.substring(0,10));
}
);
</script>
<h1 id="entry-title">This is a sample blog title</h1>
</body>
</html>
<h1 id="entry-title">This is a sample blog title</h1>
<script>
(function() {
var el = document.getElementById("entry-title"),
supportedProp = el.textContent != null ? 'textContent' : 'innerText';
el[supportedProp] = el[supportedProp].substring(0, 10);
}());
</script>
Demo
You have to either place your script below the element that you want to reference or defer its execution with a DOMContentLoaded or window load event handler.
Also, the W3C standard property is textContent instead of IE's proprietary (and adopted by Chrome) innerText property. Therefore you need to do some feature detection if you want to support both Firefox and IE. Chrome accepts either of the properties.

Changing value of textarea

I write this script to change the value of a textarea but I fail to do so. What's wrong with my code?
<html>
<head>
<script type="text/javascript">
document.getElementsByName("status").innerHTML = "hi";
document.getElementsByName("status").title= "hi";
document.getElementsByName("status").placeholder= "hi";
</script>
</head>
<body>
<textarea placeholder="What's on your mind?" onfocus="window.UIComposer && UIComposer.focusInstance("c4d981e9a2c98b0483252333");" name="status" id="c4d981e9a2c98b0483252333_input" title="What's on your mind?" class="DOMControl_placeholder UIComposer_TextArea">What's on your mind?</textarea>
</body>
</html>
Iif you try using:
var textarea = document.getElementById('c4d981e9a2c98b0483252333_input');
textarea.value = 'hi';
It should work.
Otherwise, because of the way getElementsByName works, you'd need to provide an index (zero-based) to the call to identify which of the textareas you want to work with:
var textarea = document.getElementByName('status')[0]; // selects the first element of name 'status'
textarea.value = 'hi';
Two problems
First, document.getElementsByName returns a NodeList (which is like an array), not a single element.
Second, you do nothing to delay the execution of the JS until the element actually exists. So it won't find it anyway.
Change to document.getElementsByName("status")[0]
Move the <script> element so it appears after the textarea.
I wouldn't be comfortable with using innerHTML to modify a form control either. I'd switch to value instead.
<script type="text/javascript">
document.getElementsByName("status")[0].value = "hi";
</script>
put this script in the body
<script type="text/javascript">
document.getElementById("status").value= "hi";
</script>
change getElementsByName to getElementById
getElementsByName -> returns array of elements
getElementById -> returns single control..
then put the script in between body tags not in header.....
<html>
<head>
</head>
<body>
<textarea placeholder="What's on your mind?" onfocus="window.UIComposer && UIComposer.focusInstance("c4d981e9a2c98b0483252333");" name="status" id="c4d981e9a2c98b0483252333_input" title="What's on your mind?" class="DOMControl_placeholder UIComposer_TextArea">What's on your mind?</textarea>
<script type="text/javascript">
document.getElementById("c4d981e9a2c98b0483252333_input").value = "hi";
document.getElementsByName("status")[0].value = "hi";
</script>
</body>
</html>

Categories