Passing Javascript DOM Value to Inner HTML - javascript

i need to get some value from one hidden id and pass it to another ID as inner HTML.
here my code
<script>
function replaceText(){
var x=document.getElementById("mainTitle1").value;
document.getElementById("mainTitle").innerHTML=x;
}
</script>
Here HTML File
<span id="mainTitle"></span>
<span style="display:none;" id="mainTitle1">Text Content</span>
but this isn't working. I'm getting 'undefined'

<script>
function replaceText(){
var x=document.getElementById("mainTitle1").innerHTML; //Correct here
document.getElementById("mainTitle").innerHTML=x;
}
</script>
The Problem is with .value change it to .innerHTML

GetElementById should be getElementById JavaScript is case sensitive language

easy :
var x=document.getElementById("mainTitle1").innerHTML;
document.getElementById("mainTitle").innerHTML=x;
Working DEMO

Related

Passing HTML value to embedded script

So I have a HTML file with an embedded script. A Java application sends a value to this HTML file. Now I wonder how to pass this value from the HTML down to the script. Is this even possible?
Here is the simplified HTML file with my approach:
<html>
<body>
<div id="test">
[VALUE_FROM_BACKEND] // prints "let valueFromBackend = 1234"
</div>
<script>
console.log(document.getElementById('test').value);
// should return: let valueFromBackend = 1234;
// actually returns: undefined
</script>
</body>
</html>
Unfortunately, I can't pass the value from the Java application directly to the script. I got the above approach from here, but this doesn't work.
Other solutions only focus on getting values from remote HTML pages, declaring the HTML files's source in the script tag. But since it is an embedded script here, this also seems not to work.
Does anyone know how to deal with the situation? Help will be much appreciated.
Only HTML input elements have a value in javascript. A div cannot have a value, which is why your code returns undefined.
To access the text inside a regular HTML element, such as a div, use element.innerText instead.
Here is a working code snippet you can try out:
console.log(document.getElementById('test').innerText);
<div id="test">
let valueFromBackend = 1234
</div>
As you want to get value of a div element, so the syntax is:
document.getElementById('test').innerHTML
Remember that getElementById().value works for input and use getElementById().innerHTML for elements like div

Uncaught ReferenceError: var is not defined

I have two textarea which starts on empty value.
Then when I fill the first textarea with id "postcrudo" I want that the next textarea (with id "posthecho") getthe same value as the first, and also show the same. Like a two way binding, like AngularJS, but only with JavaScript and jQuery.
This is the JS:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$("#postcrudo").val(function(){
algo = this;
});
postHecho = postCrudo;
console.log("OK!");
});
});
</script>
and this the HTML:
<body>
<div style="width:700px;float:left;">
<p>Post crudo:</p>
<p><textarea cols="100" maxlength="99999" name="postCrudo" id="postcrudo" rows="60"></textarea></p>
</div>
<div style="width:700px;float:left;">
<p>Post pasado:</p>
<p><textarea cols="100" maxlength="99999" name="postHecho" id="posthecho" rows="60"></textarea></p>
</div>
<div style="clear:both;"></div>
<p><input type="submit" value="submit" id="submit" /></p>
</body>
The error in Chrome console is:
Uncaught ReferenceError: postCrudo is not defined
Is this what you want?
https://jsfiddle.net/a4nmto6t/1/
Just get the value of the first textarea and change the value of the second to that:
$(document).ready(function(){
$("#submit").click(function(){
var postCrudoVal = $("#postcrudo").val();
$("#posthecho").val(postCrudoVal);
console.log("OK!");
});
});
Neither postHecho nor postCrudo are declared (by you**), and even if they were, assigning one of them to the other does not do what you want. You have to assign the value of the first textarea to the value of the second textarea using (in this case) jQuery selectors, because they ARE the ones referencing the DOM elements (the textareas).
** Elements that have an id are set as global 'variables' by default, but you shouldn't use them; it is instead suggested that you either use the DOM API to find elements or use jQuery (which uses the DOM API behind the scenes).
There is no declaration of postCrudo so it is undefined. Also why would you want to try and do this yourself instead using something like AngularJS to handle data bindings. You are essentially doing more work for no reason. Plus you have to handle all aspects of 2 way data binding manually. To me there is smarter ways to do this.
Your element id postcrudo is all lowercase. postCrudo is indeed not defined
This linepostHecho = postCrudo; makes no sense, I think you're trying to do this:
$('#posthecho').val($('#postcrudo').val())
JavaScript syntax is case sensitive.
`postHecho = postCrudo;`
Should be:
`postHecho = postcrudo;`

How to open display block using div name?

I have one problem in display the block using div name .Here My code
<button onClick="reply_click()">&#10799</button>
<div id='id' name='name' style="display: none;" >I am comming..</div>
<script>
function reply_click() {
//document.getElementById('id').style.display='block';
document.getElementsByName('name').style.display='block';
}
</script>
Using div id it will display the block ,but using div name it's not working
Any body give the sugesstion ?
Thanks in advance
Because getElementsByName returns an nodelist not a single element, so There should be
document.getElementsByName('name')[0].style.display='block';
DEMO
I think name is not an legal name to use it as value for name attribute. If this is the case, then use a proper legal name to use it as value of name attribute.
And, anyways try with different name as:
document.getElementsByName('divName')[0].style.display='block';

Calling JavaScript function into a P tag

I would like to call the following javaScript function so it gets outputted to a HTML P tag, but am not sure how to do this without explicitly calling the function in the HTML file.
I do not want to do this...
<p class="showcode">
<script type="text/javascript">
wise_words();
</script>
</p>
I would like to keep the javaScript code all in one js file.
I have tried it this way but this does not seem to work...
document.getElementById("showcode").innerHTML = wise_words();
I would really appreciate any help as to what I am doing wrong.
Here is my code... http://codepen.io/anon/pen/qfLdE I would like to have the generated text get outputted inside the grey box.
You should call the function in an onload handler, so that it is executed after the DOM has been constructed:
window.onload = function() {
document.getElementById("showcode").innerHTML = wise_words();
}
Another problem is that your wise_words() function is using document.write (please don't use document.write) instead of returning a value. You need to return a value:
var retText = wiseText[nextVal][0];
nextVal += 1;
writeCookie("wisewords", nextVal.toString(), 33);
return retText;
Try following using Jquery:
$(".showcode").html(wise_words());
NOTE: Assuming your function returns the HTML/text.
<p class="showcode">
<script type="text/javascript">
document.write(wise_words());
</script>
</p>
or:
<body onload="document.getElementById('showcode').innerHTML = wise_words()">
<p id="showcode">
</p>
</body>
(note id instead of class).

get value in an element dynamically using DOM in javascript

Dear all, my issue is this.
I have like the alert box to display all the text I have in a element. May I know how I can do it?
My ori idea:
<a onclick="displaytext(something)">testing</a>
function displaytext(something){
alert(something);
}
Can someone please help me to solve this? Thanks.
Use innerHTML (or innerText if you don't want the HTML) and this:
<script>
function displaytext(something) {
alert(something.innerHTML); //alerts 'testing'
return false;
}
</script>
<a onclick="displaytext(this)">testing</a>
Use the innerHTML attribute, after you've gotten the object using getelementbyid or similar.
If you are just wanting to display the text you should use innerText
Live example
HTML
<a onclick="displaytext(this)">testing</a><br />
<a onclick="displayOtherText()">I'll display the div innerText</a><br />
<a onclick="displayOtherHtml()">I'll display the div innerHTML</a><br /><br />
<div id="textToDisplay"><span>Some sample</span> text here</div>
JavaScript
<script>
function displaytext(element){
alert(element.innerText);
}
function displayOtherText(){
alert(document.getElementById('textToDisplay').innerText)
}
function displayOtherHtml(){
alert(document.getElementById('textToDisplay').innerHTML)
}
</script>
you should use a simple function like this. but be careful this function takes an element id so this will not work for a class name or a element name.
function sayText(elId) {
var html = document.getElementById(elId).innerHTML;
if (html != null) alert(html)
}

Categories

Resources