Changing Text Value With JavaScript Doesn't Affect It's Real Value - javascript

I want to change text element with javascript code and click the button. I'm changing html text value with javascript code :
document.getElementsByName('query')[0].value = "test";
and i'm focusing in that element with :
document.getElementsByClassName('input choice-input text-input')[0].focus();
and then i'm clicking the button :
document.getElementsByClassName('choice-input load-button')[0].click();
But at the end the text element still has old variable in it. It's looks like working but it's just visually i guess. When i type some character after running
document.getElementsByName('query')[0].value = "test";
code and then delete it manually it's working. I think i should change text element with another code or i have to refresh it somehow. Thanks!

Related

How to Change Text Value on Canva.com with Javascript

I am trying to change the value/text of a text node in canva.com.
I am able to change it visually but when I reload the page, or try to download the design, the old placeholder text is shown.
In canva when you change anything it automatically saves the changes, but you can also do this manually. I have tried manually saving but with no luck, only the old placeholder text is saved.
I have tried changing the text with the following methods.
The text is in a span so at first I tried to change that one.
var all_texts = document.getElementsByClassName("S1PPyQ");
all_texts[0].innerText = "HEY";
all_texts[0].textContent = "HEY";
all_texts[0].outerText = "hey"
After that I tried to get the parent node, which was a p tag. So basically the same code as above just with a different class name. This also did not work.
Any help is appreciated.

javascript - input type = radio disappears when changing text

Im trying to change the text of a radio button.
In the beginning I got this:
but when I change the text with jquery I get this:
I tried $('label[for=id_players_choice_0]').text(x) and $('#id_players_choice_0').text(x) when x is my new value.
As you can see here http://api.jquery.com/text/#text2, jQuery text method changes the content of element. It results in removing all child elements and replacing it with the value of the parameter string used in text(string) method.
You should put the text content into separate element and edit its value by the text() method.
For example create a span element inside the label and use $('label[for=id_players_choice_0] span').text(x)

How to change and track changes to a textarea

I found it really hard to come up with a question title for this one so I apologise that it's fairly cryptic but I'll try explain better there.
Basically part of an app I'm developing involves placing 'placeholders' in a textarea and then modifying those placeholders outside of the textarea.
For example:
This is the <first> placeholder. This is the <second> placeholder.
This is the <first> placeholder again.
Basically i have JS that detects these placeholders and creates input boxes to hold the text. So there would be an input text box for first and one for second.
What I want to achieve is when I type a value into the textbox it changes the placeholder in the textarea to the content being typed into the textbox. Think sublime text editor's snippets for a textarea.
I'm trying to figure out how I can track the placeholders in the text area. For example if a placeholder was <first_name> and i started typing into the placeholders textbox 'Billy'. I could easily change the placeholder by using a string replace function. However now the placeholder <first_name> doesn't exist in the textarea and so now I can't go back and change it. I need to have a way of tracking these placeholders whilst they are changing.
I hope that makes sense.
If you're not bound to a <textarea> element, you can try with a simple div with the attribute contenteditable="true". This way you can use some <span> to mark all the placeholders.
I set up a demo on jsfiddle, try it.
Using an element with contenteditable="true" would be easier for that task, because you could represent placeholders as span elements and you would then only have to retrieve them by id or any other unique attribute to update their content.
If you have to use a textarea and the users can only modify it's content using external inputs, maybe you could initially track the index of each placeholers and their length and keep those synchronized as values are changed.
You could then easily replace content in the textarea. For example, if the placeholder starts at 15 and has a length of 13.
var string = 'this is a test {placeholder} bla bla bla',
placeHolderIndex = 15,
placeHolderLength = 13;
string =
string.substring(0, placeHolderIndex)
+ 'new value'
+ string.substring(placeHolderIndex + placeHolderLength);
//update indexes of every placeholders that comes after this
//one and update the content length of this placeholder.
Obviously, you don't want to hardcode any values and you will want to handle this process in a dynamic way, but that's just an example.
NOTE: I guess users can modify the textarea content if you're using one. In that case, it would make things a bit more complicated, because you would have to update the index of the placeholders for every modifications the user does and you would also have to prevent them from editing the placeholders-mapped text directly.

basic live text input without html <input>'s

I'm trying to start a project that requires that the javascript know every word that's typed in. An example of something I would try to accomplish would be that you would type 4 + 4, the interpreter on the webpage knows what you mean, and automatically puts = 8 on to the end of that line to show it's computed it, without having to submit anything or press any button.
I've looked into the element, but I don't want to reinvent the wheel or go against what the spec says. With putting a <textarea> as input on top of a canvas, the javascript on the page can only know what is in the textbox when the user submits the text. Is there anything out there that would help with this?
Thanks in advance!
To get the value of a textarea you can just access it via the DOM:
var textArea = document.getElementById("id-of-textarea");
To the textarea you can attach different eventlisteners, and in your case I would use onkeypress
textArea.onkeypress = function () {
var ta_value = textArea.value;
alert(ta_value);
}
Of course you'd have to write your own interpreter, I wouldn't recommend running eval on the input...
try adding a hidden input element and give it the focus when the page load is complete, and use the onkeyup handler to do whatever u want.

input text event is not triggered when updated using DOM

I am having an issue trying to trigger the test() function when updating the input of type text "testName" using the DOM. Does it have something to do with the DOM itself? It works when I am directly clicking on the input of type text and modify it, but not when another JS function access it through DOM to modify it.
document.getElementById('testID').value = "test";
Thank you
If you need to trigger the onchange event your code has to be like shown below
document.getElementById('testID').value = "test";
document.getElementById('testID').onchange();
Hope this solves your problem.
unlike a text field, a text area has no value that gets populated. make a div with id="testID" inside the text area and use that instead.
document.getElementById("testID").innerHTML="New text!";
if it is a text field, then your code should owrk
document.getElementById('testID').value = "something";
what are you using to trigger the event? onclick? onchange? what's it related to

Categories