How to copy a value from two separate HTML ids? - javascript

I've got a feeling this is an incredibly simple operation. I could just use some steer on what exactly I am doing wrong here.
I just need a simple program to take the content from <span id "text"> and copy this into <div id="text2">.
function getValue() {
var text = document.getElementById("text");
document.getElementById("text2").innerHTML = text;
};
getValue;
<span id="text"> Hi there </span>
<div id="text2"></div>

It seems that you are not calling function properly.
getValue();
instead of
getValue;

Use this code:
function getValue(){
document.getElementById("text2").innerHTML = document.getElementById("text").innerHTML;
}
getValue();
This code should be in a onload function or in the body tag.

try following:
function getValue()
{
var text=document.getElementById("text").innerHTML;
document.getElementById("text2").innerHTML = text;
};

try this jQuery code...
function getValue(){
$("#text2").text($("#text").text());
}
this works for me...

Related

Get value inside Div Javascript

ho,
I have a div that I access like so:
var gridcellrowvalue0 = gridcell0.innerHTML;
This returns to me the following div:
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
In my JS I would like to accesss the "DefaultText" variable and I have tried this:
gridcellrowvalue0.innerHTML;
gridcellrowvalue0.getAttribute("data-originaltext");
But none of them work. I'm assuming that getAttribute doesn't work because it is not really an element, it's innerhtml.
My goal is to use the "DefaultText" value in an IF-statement and therefore I simply need it.
I appreciate any pointers, my friends!
You could access your element directly from gridcell0 using gridcell0.querySelector('.DivOverflowNoWrap') instead, like :
var gridcell0 = document.querySelector('#x');
console.log( gridcell0.querySelector('.DivOverflowNoWrap').innerHTML );
Snippet:
var gridcell0 = document.querySelector('#x');
if (gridcell0.querySelector('.DivOverflowNoWrap') !== null) {
console.log(gridcell0.querySelector('.DivOverflowNoWrap').innerHTML);
} else {
console.log('Does not exist');
}
<div id="x">
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
</div>
With Javascript also it can be achieved but I am showing here using jQuery
$('document').ready(function() {
var div = $(".DivOverflowNoWrap");
var text = div.text();
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
The problem is how you access the div in the first place. If you do it like you described (with gridcell0.innerHTML). It will return a string. Not an HTML element.
Therefore you can't use .getAttribute or .innerHTML, because you try to apply it on a string. Access your div differently (querySelector or getElementBy...) and you will be able to use those.
You can use jquery:
$("[class='DivOverflowNoWrap']").text();
$("[class='DivOverflowNoWrap']").attr("data-originaltext")
It's pretty simple:
<html><head></head>
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
<script>
test();
function test(){
var x=document.getElementsByClassName("DivOverflowNoWrap Ellipsis")[0].getAttribute("data-originaltext");
alert(x);
}
</script>
</html>

Syntax error on javascript

I am getting syntax error
Uncaught SyntaxError: missing ) after argument list
My code
<button onclick="alert('document.getElementById('todo.age').value');">onclick</button>
in controller add
$scope.alert = function(age) {
alert(age);
}
in html change like this:
<button ng-click="alert(todo.age);">onclick</button>
Try this:
<button onclick="alert(document.getElementById('todo.age').value);">onclick</button>
You shouldn't quote the argument to alert if you want to call the function.
It will start working better if you separate your HTML code and JavaScript.
Kind of this.
HTML:
<button id="button">onclick</button>
JavaScript:
window.onload = function()
{
var button = document.getElementById('button');
button.onclick = function()
{
//do some action here
}
}
This will help you to avoid simple syntax errors.
if u need value of the todo.age id values use the following code. <button onclick="alert(document.getElementById('todo.age').value);">onclick</button>
or else of u want to print the whole text document.getElementById('todo.age').value like this
use
<button onclick="alert('document.getElementById('todo.age').value');">onclick</button> code/

Removing <b> tag in javascript

Actually I've found a similar questions and neither of the answers helped me.
Could someone please help me figuring out how to remove <b> from a variable in js?
What I have is the following:
var p_name_original = $(this).find('td#p_name').html();
alert(p_name_original);
which returnes some text in bold, like <b>text</b>.
How to remove this <b> and </b> from p_name_original? It'd be much better if I could remote it while assigning the value to p_name_original.
Thanks in advance,
AshotAr.
simple: change .html() to .text()
If there are only <b> Tags use this:
function strip(html)
{
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText;
}
If there are others to:
function strip(html)
{
html = html.replace(/<b>/g, "");
html = html.replace(/<\/b>/g, "");
return html;
}
try this
var p_name_original = $(this).find('td#p_name>b').html();
alert(p_name_original);

Calculating a number using a textbox

I've been trying to calculate a number using a number given by a user in a text box. I've been trying to use the following code. But when I try to test it, nothing happens. Is there something I'm missing? And is there a way that I can make the imprint variable global?
<form>
<p>How many products do you want
ingraved?<input id="imprint_amount" name="imprint_amount" type="text"/>
</p>
<p>Names to be Imprinted(one per
line)<TEXTAREA COLS=25 NAME="imprint_text" ROWS=5 WRAP=HARD style="resize:none;"></textarea>
</p>
<input onclick="imprint_price" type="button" value="Finish"/>
<p id="total_cost"></p>
</form>
<script type="text/javascript">
function imprint_price() {
var imprint_cost,
imprint_quality,
imprint_total;
imprint_cost = 10.99;
imprint_quantity = document.getElementById('imprint_amount');
imprint_total = $imprint_cost * parseInt(imprint_quantity, 10);
document.getElementById('total_cost') = "$" + imprint_total;
}
Thanks,
Traci
You will want to use the value property of that input element you are referencing in your variable:
… parseInt(imprint_quantity.value, 10);
For arbitrary HTML elements, you need to use textContent (or innerText to support old IE):
document.getElementById('total_cost').textContent = …;
Assigning to an expression as you did should have thrown a quite accurate exception, check your browser's error console for them.
Change your javascript to:
<script type="text/javascript">
function imprint_price() {
var imprint_cost,
imprint_quantity,
imprint_total;
imprint_cost = 10.99;
imprint_quantity = document.getElementById('imprint_amount').value;
imprint_total = imprint_cost * parseInt(imprint_quantity, 10);
document.getElementById('total_cost').innerHTML = imprint_total;
}
</script>
Working jsFiddle here http://jsfiddle.net/Zt38S/2/
In this line, you'll want to set the innerHTML of the element.
document.getElementById('total_cost').innerHTML = "$" + imprint_total;
This basically sets the text inside the <p></p> to be <p>$x.xx</p>.
And also this line should be
imprint_quantity = document.getElementById('imprint_amount').value;
which retrieves the value from the textbox.
Furthermore, when defining the variables, you wrote "quality". It should be
imprint_quantity,
imprint_quantity = document.getElementById('imprint_amount');
=
imprint_quantity = document.getElementById('imprint_amount').value();
Lemme know if that fixes it, a common enough mistake.

Appending a javascript variable to an html textarea

I know this has to be be doable, does anyone know how and if you can do it?
or you can do it this way:
var myVar = 'sup fresh our turn baby!';
var myTextArea = document.getElementById('myArea');
myTextArea.innerHTML += myVar;
Something like this should work:
var textArea = document.getElementById("mytextarea"); // assuming there is a textarea with id = mytextarea
var textToAppend = document.createTextNode("Hello, World!");
textArea.appendChild(textToAppend);
EDIT: or, as Pointy suggested, the last two lines can be replaced by:
textArea.value += "Hello, World!";
function appendText(str) {
var obj=document.getElementById("myTextArea")
var txt=document.createTextNode("append this text")
obj.appendChild(txt)
}
Gee whiz guys:
document.getElementById('whatever').value += someJavascriptString;

Categories