Recently I encountered an issue with the textarea. If I have a textarea likeso,
<textarea>Hello World</textarea>
And I get the contents of it with JS,
var textareaText = document.getElementsByTagName('textarea')[0].value
The variable textareaText is Hello World. But if I were to change the value of the textarea and re-run the JS. It would still result in Hello World despite the true current value being something else. I've looked this up and seen +5 answers but all of them use jQuery which is something I don't use or know (to translate) and none pure JS. If anyone could help me out it would be greatly appreciated. Also some of the answers seemed to be just for one textarea. In my project I'd have +1,000 so I'd like to avoid that.
This should work, no matter how many <textarea>'s you use, this should work:
<textarea id="textarea1">hello</textarea>
<textarea id="textarea2">goodbye</textarea>
<button id="button">button</button>
<script type="text/javascript">
var button = document.getElementById("button");
button.onclick = function() {
alert(document.getElementById("textarea1").value + "\n" + document.getElementById("textarea2").value);
};
</script>
I just tested it and it works, no matter which values I change, and even if I change both. The trick is to not store the values, as they aren't updated, so you should get the value on-the-spot.
Although it was against the questions guidelines, with "1000+" textareas, setting a JavaScript variable for each one might slow down loading times. May I suggest jQuery, with the same HTML?
<script type="text/javascript">
$("#button").on("click", function () {
alert($("#textarea1").val() + "\n" + $("#textarea2").val());
});
</script>
Of course, feel free to mix up and change up the code provided above. Hope this helps!
It works fine in my computer:
function getText(){
var textareaText = document.getElementsByTagName('textarea')[0].value;
console.log(textareaText);
};
<textarea>Hello World</textarea><br>
<button type="button" onclick="getText();">Get text</button>
May be?
<textarea id="text-area">Hello World</textarea>
var el = document.getElementById("text-area");
var textareaText;
el.addEventListener("input", function(e) {
textareaText = e.target.value;
console.log(e.target.value);
});
Related
Here I want to trap and alert or echo the value of var thisCount
The problem is I can't display the value.I'd tried many ways but no luck.
$(document).on("click", ".open-dialog", function () {
var thisCount = $(this).data('count');
//this place the code
$(".modal-body #count").val( thisCount);
});
Your question doesn't really clarified what you've tried or where you want the value displayed, but common answers are:
1) Console. This will output to your browsers log.
console.log(thisCount);
2) If you want to put it into an HTML tag, you can use classic javascript
document.getElementById('yourTagsId').innerHTML += thisCount;
// You can use = instead of += as well
3) You could also use an alert or a confirm
alert(thisCount);
confirm(thisCount, function(){return true;});
// confirm takes both a displayed value, and a function which will be performed when the user presses the 'Ok' button
If you need ah dataattribute like this below .alert console.log both are working
$(document).on("click", ".open-dialog", function () {
var thisCount = $(this).data('count');
$("#count").val( thisCount);
console.log(thisCount)
alert(thisCount)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="open-dialog" data-count="hello">click</button>
<input type="text" id="count">
Maybe you should verify if the jquery library is properly imported
Also, you can use the Chrome Developer tools (Ctrl +Shift+ i) and verify the value in the javascript console. Just to see if you can see the value in the debugger.
I had a more complicated form working a couple of days ago, but suddenly it stopped working and I'm rubbish at saving versions, so I've taken it right back to basics, and I can't get it to work. What am I doing wrong? Am I using onInput incorrectly?
<input type="text" id="number-of-copies-value" onInput="quote()" value="500">
<span id="total-cost-value">0.00</span>
And here's the Javascript:
function quote() {
var totalcostvalue = document.getElementById("total-cost-value");
var numberofcopiesvalue = document.getElementById("number-of-copies-value").value;
var totalcost = (+numberofcopiesvalue);
totalcostvalue.innerHTML=totalcost.toFixed(2);
}
quote();
https://jsfiddle.net/tod0wusv/1/
Your HTML expects the quote() function to be globally available. Make sure that is the case.
If I change your fiddle to have quote() available on global window object like,
window.quote = function quote() {
// ...
};
the fiddle starts working again.
WORKING FIDDLE
If I create a local HTML file with your content, it works right away, which makes sense since quote() is defined on global scope.
Looks like JSfiddle executes the JavaScript in a function scope which breaks your quote() call.
If you care about browser compatibility I would suggest using the onkeydown event with a setTimeout function as described here Detecting "value" of input text field after a keydown event in the text field?
To make this work in JSFiddle, change the javascript "load type" setting in your JavaScript settings to one of the "no wrap" options.
HTML
<input type="text" id="number-of-copies-value" onkeydown="window.setTimeout(function() { quote(); }, 1)" value="500">
<span id="total-cost-value">0.00</span>
JavaScript:
function quote() {
var totalcostvalue = document.getElementById("total-cost-value");
var numberofcopiesvalue = document.getElementById("number-of-copies-value").value;
var totalcost = (+numberofcopiesvalue);
totalcostvalue.innerHTML = totalcost.toFixed(2);
}
quote();
I've updated your JSFiddle...
https://jsfiddle.net/tod0wusv/6/
We all know StackOverFlow's system, which basically enables you to see what your written text look like while sending a question.
I'm looking to create this as well on my website, and I would like something to start with.
I obviously don't expect you to write that code for me, but to explain a bit what do I need for that and how would that work.
Edit: Using vanilla js instead of jquery
http://jsfiddle.net/wmjnaj6n/4/
HTML
<input type='text' id='input'>
<div id='update'></div>
Javascript
var element = document.getElementById('input');
var target = document.getElementById('update');
element.addEventListener('keyup', function() {
target.innerHTML = this.value;
});
For completeness, the jquery way would be:
$('#input').keyup(function() {
//do stuff here
$('#update').text( $(this).val() );
});
I am currently making some accessibility options which make the font size increase or decrease on a page. Following EndangeredMassa's for calling JS from a link it appears not to work!
My current code (which is dummy code with the right IDs which will be used in my actual site), does not even run a Javascript alert, and since I'm not one for Javascript, if anyone could let me know what I'm doing wrong.
HTML
<p id="html">Nice to meet you!</p>
<a id="incFontS" href="#">Increase Text</a>
JavaScript
var incFont = document.getElementById("incFontS");
incFont.onClick = function () {
window.alert("it ran!");
}
As you can see from my jsfiddle, the code does not work at all, and I haven't even gotten to the part where I start changin the font sizes (geh!).
Any help is greatly appreciated!
Case matters in JavaScript. The correct property name is onclick (with a lowercase 'c'). Try this:
var incFont = document.getElementById("incFontS");
incFont.onclick = function () {
window.alert("it ran!");
}
Demonstration
Also, be sure to read addEventListener vs onclick for a discussion about different techniques for binding event listeners.
DEMO
var incFont = document.querySelector("#incFontS");
incFont.addEventListener('click', function () {
window.alert("it ran!");
return false;
});
The function name is onclick not onClick
i.e.
var incFont = document.getElementById("incFontS");
incFont.onclick = function () {
window.alert("it ran!");
}
works for me.
Try this way to do increase your font size
HTML CODE
<p id="html">Nice to meet you!</p>
<a id="incFontS" href="#" onclick="myFunction()">Increase Text</a>
Java Script Code
<script>
function myFunction() {
document.getElementById("html").style.fontSize="xx-large";
}
</script>
I'm new. I've read a lot on stackoverflow, but this is my first question. Hopefully it's not a silly one. I know the crowd can be harsh at times, and often deservingly so. :)
In the following code, when you enter text in the first input box, the alert does not show what you input. However in the 2nd box, when you key something in, the alert shows it.
The difference is in the use of 'this.value' vs 'e.value'.
I'm thinking that they should both work since 'e.value' references an element and I thought 'this.value' does also, but obviously am missing something since it does not do the same thing.
Thanks in advance.
<!DOCTYPE html>
<html>
<head><script>
window.onload = function () {var e;
e = document.getElementById('eInput');
if (!e.onkeyup) {e.onkeyup = function () {alert (e.value); }; }
e = document.getElementById('thisInput');
if (!e.onkeyup) {e.onkeyup = function () {alert (this.value); }; }
}
</script></head>
<body>
<input type="text" id='eInput'></input><br><br>
<input type="text" id='thisInput'></input>
</body>
</html>
The e in the function should refer to the element that triggered the event. You should alter it to function (e) {alert (e.target.value); }; }
Now the e is the event that triggerd the onkeyup function and you can access the target to get the value.
see http://jsfiddle.net/yAaYX/
The reason why the first input doesn't work - your e variable is getting overwritten and it points to the 2nd input, which is empty at that time.
If you remove the 2 lines of the 2nd input you'll see it works just fine with e.value-
working example
Or just give the variables different names - e1 and e2 - example