I'm trying to write html but it says empty is not a function. I usually do this. I empty and then write something on the div.
var status = $('#terminalStatusDiv');
status.empty().html('<span class="terminalStatus">Connected</span>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terminalStatusDiv"></div>
The reason your code is not working as it is right now is because you used "status" as a variable name and it is a Global Property.
https://developer.mozilla.org/en-US/docs/Web/API/Window/status
var status1 = $('#terminalStatusDiv');
status1.empty().html('<span class="terminalStatus">Connected</span>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terminalStatusDiv"></div>
status is built in javascript keyword
var foo = $('#terminalStatusDiv');
foo.empty().html('<span class="terminalStatus">Connected</span>')
Related
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>
I have a object with name value. Is it possible to bind that value to html element? - like angularjs
if so what is the correct way? or is it not possible?
here is my demo :
var ob = {};
ob.name = "Testing";
$('div').text(ob.name);
$('button').on('click', function(){
ob.name = "Update Name";
console.log( ob.name ) //name updates
})
button{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h1></h1> <!-- on click nothing updates automatically -->
</div>
<button>Click Here</button>
Javascript allows the creation of object "properties" where reading or writing can execute user-defined code.
What you can do is creating the HTML node and a Javascript object with a property so that when you write to the property the code updates the HTML node:
var d = document.createElement("div");
document.body.appendChild(d);
var obj = {get value() { return d.textContent; },
set value(x) { d.textContent = x; }};
obj.value = "foo"; // Will also update d content
Note that a property that allows writing needs a place where to store the data... in the above I used directly d.textContent so the two are actually synchronized (changing obj.value changes the DOM node and vice versa).
JavaScript itself doesnt support bidirectionalBinding from scratch.
To make your example work simply add the expression, that you have already figured out correct, to your onClickFunction.
var ob = {};
ob.name = "Testing";
$('div').text(ob.name);
$('button').on('click', function(){
ob.name = "Update Name";
$('div').text(ob.name); <!-- add here -->
console.log( ob.name ) //name updates
})
button{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h1></h1>
</div>
<button>Click Here</button>
Just to clarify! It is possible to implement something that you could
call bidirectionalBinding, but thats not what you want to do using
plain javascript! It would mean implementing eventListeners on your
textValue etc.
I am using this code to replace text on a page when a user clicks the link. I would like a way to replace it back to the initial text using another link within the replaced text, without having to reload the page. I tried simply adding the same script within the replaced text and switching 'place' and 'rep_place' but it didn't work. Any ideas? I am sort of a novice at coding so thanks for any advice.
<div id="place">
Initial text here
<SCRIPT LANGUAGE="JavaScript">
function replaceContentInContainer(target,source) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
</script>
<div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
<u>Link to replace text</u></div></div>
<div id="replacements" style="display:none">
<span id="rep_place">
Replacement text here
</div></span>
Where do you store the original text? Consider what you're doing in some simpler code...
a = 123;
b = 456;
a = b;
// now how do you get the original value of "a"?
You need to store that value somewhere:
a = 123;
b = 456;
temp = a;
a = b;
// to reset "a", set it to "temp"
So in your case, you need to store that content somewhere. It looks like the "source" is a hidden element, it can just as easily hold the replaced value. That way values are swapped, not just copied. Something like this:
function replaceContentInContainer(target,source) {
var temp = document.getElementById(target).innerHTML;
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
document.getElementById(source).innerHTML = temp;
}
So replace them you simply call:
replaceContentInContainer('place', 'rep_place')
Then to swap them back:
replaceContentInContainer('rep_place', 'place')
Note that this will replace the contents of the "source" element until they're swapped back again. From the current code we can't know if that will affect anything else on the page. If so, you might use a different element to store the original values. That could get complex quickly if you have a lot of values that you need to store.
How's this? I store the initial content in an element of an array called initialContent.
<div id="place">
Initial text here [replace]
</div>
<div id="replacements" style="display:none">
<span id="rep_place">
Replacement text here [revert]
</span>
</div>
<SCRIPT LANGUAGE="JavaScript">
var initialContent = [];
function replaceContentInContainer(target,source) {
initialContent[target] = document.getElementById(target).innerHTML;
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
function showInitialContent(target) {
document.getElementById(target).innerHTML = initialContent[target];
}
</SCRIPT>
Working example: http://jsbin.com/huxodire/1/
The main changes I did were the following:
I used textContent instead of innerHTML because the later replaces the whole DOM contents and that includes removing your link to replace the text. There was no way to generate that event afterwards.
I closed the first div or else all the text would be removed with the innerText including the text that works as a link.
You said you wanted to replace back to the original text, so I used a variable to hold the last value only if this existed.
Hope this helps, let me know if you need more assistance.
The div tags were mixed up and wiping out your link after running it. I just worked with your code and showed how you could switch.
<div id="place">
Initial text here
</div>
<SCRIPT LANGUAGE="JavaScript">
function replaceContentInContainer(target,source) {
document.getElementById(target).innerHTML =
document.getElementById(source).innerHTML;
}
</script>
<div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
<u>Link to replace text</u></div>
<div class="text" onClick="replaceContentInContainer('place', 'original_place')">
<u>Link to restore text</u></div>
<div id="replacements" style="display:none">
<span id="rep_place">
Replacement text here
</span>
<span id="original_place">
Initial text here
</span>
</div>
I'm trying to use the 'return' value from a JS function as a integer in HTML as follow:
HTML
<span class="..." data-from="..." data-to="<!--I want to use it here!-->" data-speed="..." data-refresh-interval="..."></span>
<!--Print the value here.-->
<div id="daysWorking"></div>
JS
<script>
.
.
document.getElementById("daysWorking").innerHTML = Date.daysBetween(Jan1st2010, today);
</script>
Thanks!
Not sure if I understand it well, but try
var foo = Date.daysBetween(Jan1st2010, today);
document.getElementById("daysWorking").innerHTML = foo;
document.getElementById('mySpan').setAttribute('data-to', foo);
where mySpan is the ID of your span.
If you don't care about old browsers, you can replace the third line of code with
document.getElementById('mySpan').dataset.dataTo = foo;
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.