well, i have TEXTAREA in a form.
<textarea name="content_en"></textarea>
and also i have three buttons near this textarea:
<button class="button_en>EN</button>
<button class="button_ro>RO</button>
<button class="button_ru>RU</button>
i want to do this:
to change textarea name when i press a button without page refreshing or something like that.
so this is to put different content in different columns from a row from database. (Content in different languages under same ID)
You can do this:
Change the class of the buttons and move atual class to other param like 'data-txt':
<button class="button-change-txt" data-txt="en">EN</button>
<button class="button-change-txt" data-txt="ro">RO</button>
<button class="button-change-txt" data-txt="ru">RU</button>
Then, add a class to textarea:
<textarea class="txt-content" name="content_en"></textarea>
So, add an event to ".button-change-txt" class:
$('.button-change-txt').click(function(){
var txt = $(this).attr('data-txt'); //STORE THE data-txt INTO A VARIABLE
$('.txt-content').attr('name','content_'+txt); //CHANGE THE TEXTAREA NAME
})
Some would recommend using the "on" method instead of the "click" method, seeing as the .click() method simply points to .on('click'), thus:
$('.button-change-txt').on('click', function(){
var txt = $(this).attr('data-txt');
$('.txt-content').attr(name,'content_'+txt);
});
Related
I'm working on a project where I have to change the text inside a button, but the button is not allowed to have an ID. I'm wondering how to accomplish this.
If it helps, I am using Kendo UI, which I believe is how the button is given its onClick method using data-bind:
<button class="some-css-classes" data-bind="click: myJavascriptFunction">Text I want to change</button>
You can avoid adding more attributes by just targeting the existing data-bind attribute and change the text inside like this:
var x = document.querySelector('[data-bind="click: myJavascriptFunction"]');
x.innerHTML = "Hello World";
jsFidldle: http://jsfiddle.net/AndrewL64/z7t31psn/1/
Or if you don't want to create an extra variable:
document.querySelector('[data-bind="click: myJavascriptFunction"]').innerHTML = "Hello World";
jsFidldle: http://jsfiddle.net/AndrewL64/z7t31psn/2/
One workaround might be using a data-id attribute.
<button data-id="unique_id">Text I want to change</button>
and then
document.querySelector('[data-id=unique_id]').innerHTML = 'something';
or
$("[data-id=unique_id]").html('something')
if you're using jquery
You can get it by a class
<button class="test">
Test Button
</button>
document.getElementsByClassName('test')[0].innerHTML="Text Changed"
document.getElementsByClassName("class1 class2 class3")[0].innerHTML = "test" replace zero with the appropriate index. This may require updating if the website markup is modified.
very new to coding here, apologies for the basic question. trying to complete the odin project's build-a-calculator challenge (http://www.theodinproject.com/javascript-and-jquery/on-screen-calculator)
and struggling to make numbers appear after they are clicked. Also, how would I store the value in a variable or array to then be used in a calculation later?
Here's the excerpt of my JS:
$(".numbers").on("click", function() {
$+(this).text()
;});
And my HTML (note I'm using jsfiddle, hence the lack of html opening and closing tags etc:
<script src="jquery-1.11.3.min.js"></script>
<div class="numbers">
<button type="button">0</button>
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
<button type="button">7</button>
<button type="button">8</button>
<button type="button">9</button>
</div>
<div class = "operators">
<button type="button">+</button>
<button type="button">-</button>
<button type="button">*</button>
<button type="button">/</button>
<button type="button">=</button>
<button type="button">clear</button>
</div>
To store the value of the buttons in a variable you could do this.
$('button').on('click', function(){
var i = $(this).text();
console.log(i); // print the value of i in the console
});
Once you have the value you'll need to be able to put the value of each button clicked in order on the "display" of the calculator like so.
HTML
<div class="display"></div>
JavaScript
$('button').on('click', function(){
var i = $(this).text();
var display = $('.display');
display.text( display.text() + i );
});
Hopefully that helps point you in the right direction.
I am not sure how you want to display your numbers. Are you using a TextArea?
For storing values, inside your function do something like
var num=$+(this).text()
Other than that, you need to be more specific.
The following jsfiddle demonstrated how to do what you want.
// array is defined outside the click handler
var clickedArray = [];
$('button').on('click',function() {
// get the button that was clicked
var buttonClicked = $(this).html();
console.log(buttonClicked);
// store it as the last element in the array
clickedArray.push(buttonClicked);
console.log(clickedArray);
// and output it to the screen
$('.js-calc-out').append(buttonClicked);
});
Points to note:
The array is defined outside the click event handler so it can be used without being reset each time a click event is fired. This array will exist until the page is refreshed or it is purposely unset and you can access it as you need it.
The html() function retrieves the contents of any given HTML element, in this case it's the clicked button, which is retrieved using $(this) (any element an event is fired on is retrieved using this which is then converted to a jquery object using the $() function).
The push() function is used to append the latest clicked element to the end of the array mentioned in point 1.
.js-calc-out is an HTML element to which we append() the latest click to, meaning the sequence of clicks are output.
The console.log declarations output some stuff into the inspector which should help you see the process develop.
PS. this is a simplified solution that takes into account your current position on the learning curve; ideally you'd want to use objects to encapsulate data and functionality in javascript and keep out of the global namespace.
I have multiple <textarea>, sometime they are blank and sometime they are filled with text.
I want to insert a simple text code such as "<check>" which will automatically change to a check (\u2713).
Presently, my code is like this:
<textarea name="1-S" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
<textarea name="1-NI" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
<textarea name="1-C" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
(This block of <textarea> gets repeated, but of course, with different name in each one.)
<script type="text/javascript">
function check(str){
var res = str.replace("<check>", "\u2713");
????
}
</script>
The output will then replace <check> into actual check symbol (\u2713)
The challenge is, I don't want to have to add ID to every <textarea> and then write a script for each one. So is there a way for me to use this one script to apply to all <textarea>???
Many thanks in advance!
You could use the getElementsByTagName method to create an array of your text area tags.
Since you're using jQuery:
$("textarea").each(function(index, textarea) {
// do replacement here
});
Note that you need to use HTML entities to put <check> into a textarea: <check>
Also, you can put a checkmark in without any Javascript like this: ✓
Yes. You can bind an event handler to all elements of a type using jquery.
$('textarea').on('change', function() {
var text = $(this).val();
if (text.match(/\<check\>/)) {
$(this).val(text.replace(/\<check\>/, "\u2713"));
}
});
The benefit of doing it this way is that you can remove your inline 'onchange' handlers from the html and consolidate your validation logic strictly to JavaScript.
To replace the actual textarea content you need to update the value of the textarea with the result of your String-replace regexp. var text = $(this).val() is just assigning the content of the textarea to the variable text, it's not a reference to the innerHTML portion of your textarea.
On a sidenote if you'd like to allow users to use shortcodes in a form, prefer square bracket syntax, e.g., [check].
I have a website for which I would like to create a JavaScript bookmarklet for autoclicking, but the site does not use an ID tag. Here is the code of site:
<input type="submit" name="Submit" value="Find Product"
onclick="return incrementClicksTest('2','true')" class="buttonSubmit">
I used this JavaScript bookmarklet:
javascript:document.getElementById('any_id_here').click()
It works fine for buttons with IDs, but how do I go about making a bookmarklet using the name, value, and type tag?
Use the following:
document.getElementsByTagName("input")[0].click();
Sample Code: http://jsfiddle.net/dcRsc/
Now, that will work if your button is the first input in your page.
Use this if you have numerous elements in your page:
var elems =document.getElementsByTagName("input");
for(var i=0;i<elems.length;i++)
{
if(elems[i].type=="submit" && elems[i].name =="Submit")
{
elems[i].click();
break;
}
}
Sample Code: http://jsfiddle.net/dcRsc/1/
That will trigger the click event of your submit button, with Submit name.
Furthermore (and since your button already has a css class) you could use the getElementsByClassName() method:
var elems =document.getElementsByClassName("buttonSubmit");
for(var i=0;i<elems.length;i++)
{
if(elems[i].name =="Submit")
{
elems[i].click();
break;
}
}
Sample Code: http://jsfiddle.net/dcRsc/2/
That will get all elements with the buttonSubmit class applied.
Or
document.getElementsByClassName("buttonSubmit")[0].click();
If your button is the only element in the page with that class on it, hence avoiding the for loop altogether.
I have a button class which I am using for twitter popover, my code is as follow:
<button class="btn btn-success" id="chaticon" data-original-title="Users Online" data-content="<a href='#'> OMGTEST </a>">
And what I want to do is to modify the data-content via javascript,
Naively I tried to do:
document.getElementById("chaticon").data-content = "new content";
and it didn't work, any ideas on how I can do this?
Use the built in accessors for HTMLElement.
getAttribute(attributeName)
setAttribute(attributeName,newValue);
like this:
var yourElement = document.getElementById("chaticon");
var dataVal = yourElement.getAttribute("data-content");
var newData = "new data";
yourElement.setAttribute("data-content",newData);
here is a simple demo: http://jsfiddle.net/hpfk3/
edit
You should probably have included jquery and popover in the question instead of just asking about a button element. Since these are available, you can change the content like this:
//store chat icon jQuery object
var chatIcon = $("#chaticon");
//change data attribute on element
//change jquery data object content
//call setcontent method
chatIcon.attr("data-content","new data").data('popover').setContent();
//target the popover element and restore its placement definition
chatIcon.data('popover').$tip.addClass(chatIcon.data('popover').options.placement);
Try setting the attribute
document.getElementById("chaticon").setAttribute('data-content','new content');