Develop Reference

jQuery setting text inside of a [object Text] item

I am trying to write a translation function inside for my web application, I can select the item with code and print it to the console. Inside the console, I can right click and click "Edit text" and it works fine and sets it. Moreover, when I try and set it in code using the jQuery function .text(), it does not work. The object I am trying to select and change is like this <div>Hello <strong>world</strong></div>, where hello is what I am trying to select and change.
The code that is trying to set it is here.
if (child.toString() == '[object Text]') {
let lengthOfChars = $(child).text().split(' ').join('').split('\n').join('').split('\t').join('').length;
if (lengthOfChars > 0) {
if (langSet[$(child).text()]) {
let newText = langSet[$(child).text()];
$(child).text(newText);
console.log(child);
}
}
}
It gives out the selected item of which I can change by right clicking, I just cannot change it programmatically as of yet.

As pointed out by Sebastian Simon, the way to set these types cannot be set using jQuery but rather using child.textContent

making HTML id a variable in javascript

i am trying to make an image named id='pr' a variable like this.
my HTML code is
<div id="main">
<img id ='pr' style="width: 500px;height: 600px;"src="https://i.redd.it/2u0y0z5i12py.png">
</div>
My javascript code:
<script type="text/javascript">
var getElementById('pr') = 1
if (getElementById('pr' = 1)) {alert ('im pickle rick bitch')}
</script>
So what i am trying to do is make a variable for pr and give it a value of one so it triggers the alert if pr is the image in the gallery.Hopefully i explained it good cause my english is not the best!(im also a noob)TY!

Your main issue is that if you make a variable for pr and then you set that variable to 1, you'll lose the reference to pr.
In other words:
var document.getElementById("pr") = 1;
is not valid code because you didn't specify a variable name. But, even if you did:
var x = document.getElementById("pr") = 1;
x would, at first hold a reference to pr and then immediately lose that value and instead be set to 1.
You also have a problem with your if condition because the single equal sign (=) is for setting a value, not comparing two values. So, your condition will always return true. JavaScript uses == and === for comparisons.
If you need a way to keep track of the element, you can give each element a data-* attribute as shown below:
var element = document.getElementById('pr');
// We can extract the data-count attribute value (a string)
// with the .dataset.count property:
if (element.dataset.count === "1") {
alert ('im pickle rick bitch');
}
<div id="main">
<!-- The data-* attributes are designed to allow you to store meaningfull data with an element. -->
<img id ='pr' data-count="1"
style="width: 500px;height: 600px;" src="https://i.redd.it/2u0y0z5i12py.png">
</div>

Try this:
var foo = document.getElementById('pr');
if (foo) {alert ('im pickle rick bitch')}
This will fix your issue with running the code and will only show if your id exists. But I suggest you have a look at some javascript tutorials. This will help you understand Suren Srapyan's answer better.

You can set a value for img, but as I understand you need to add some extra info on the img tag. You can do it via setAttribute and getAttribute methods.
In your code you have some errors. Your variable declaring is wrong. You need to give to your variable a name, in my case it's myPr and assign to it the vlaue which return document.getElementById not just getElementById. Then use setAttribute method to set some HTML5 constraint attribute called dataId. After it you can use getAttribute method to get that value and use in your logic.
const myPr = document.getElementById('pr');
myPr.setAttribute('dataId', 1);
if(Number.parseInt(myPr.getAttribute('dataId')) === 1) {
alert ('im pickle rick *****');
}
<div id="main">
<img id ='pr' style="width: 500px;height: 600px;"src="https://i.redd.it/2u0y0z5i12py.png">
</div>

Format text as user inputs in a contenteditable div

I'm attempting to make a page that allows users to input text and it will automatically format the input -- as in a screenplay format (similar to Amazon's StoryWriter).
So far I can check for text with ":contains('example text')" and add/remove classes to it. The problem is that all of the following p tags inherit that class.
My solution so far is to use .next() to remove the class I added, but that is limited since there might be need for a line break in the script (in dialogue for instance) and that will remove the dialogue class.
$('.content').on('input', function() {
$("p.input:contains('INT.')").addClass("high").next(".input").removeClass("high");
$("p.input:contains('EXT.')").addClass("high").next(".input").removeClass("high");
});
I can't get || to work in the :contains parameter either, but that's the least of my issues.
I have a JS fiddle
I've worked on this for a while now, and if I could change only the node that contains the text (INT. or EXT. in this example) and leaves the rest alone that would work and I could apply it to the rest of the script.
Any help would be appreciated, I'm new to the stackoverflow so thank you.

See the comments in the code below for an explanation of what's going on.
Fiddle Example
JQuery
var main = function(){
var content = $('.content');
content.on('input', function() {
$("p.input").each(function() {
//Get the html content for the current p input.
var text = $(this).html();
//indexOf will return a positive value if "INT." or "EXT." exists in the html
if (text.indexOf('INT.') !== -1 || text.indexOf('EXT.') !== -1) {
$(this).addClass('high');
}
//You could include additional "if else" blocks to check and apply different conditions
else { //The required text does not exist, so remove the class for the current input
$(this).removeClass('high');
}
});
});
};//main close
$(document).ready(main);

Validation in jsp using javascript

'
<TD CLASS="input-label" VALIGN="top">A:</TD>
out.println(widget_renderer.getEditableField("A"));
<TD CLASS="input-label" VALIGN="top">B:</TD>
out.println(widget_renderer.getEditableField("B"));
I want to make the attribute B field required based on the values entered for attribute field A. Also would liek to validate it and print error message
I did the below on jsp page:-
<TD CLASS="input-label" VALIGN="top">A:</TD>
out.println(widget_renderer.getEditableField("A"));
String ppn = (String)dataBean.getItemEntityData().get("A");
System.out.println(dataBean.getItemEntityData().get("A"));
if (ppn != null && (ppn == "A1" || ppn == "A2" || ppn == "A3" || ppn == "A4"))
{
>
<TD VALIGN="top"><SPAN CLASS="req-indicator">*</SPAN></TD>
< } >
,<TD CLASS="input-label" VALIGN="top">B:</TD>
out.println(widget_renderer.getEditableField("B"));
Please suggest

The original JSP code is irrelevant. Open the JSP page in your webbrowser, rightclick the page and choose View Source. All this generated HTML code which you now see is now really relevant for JavaScript since that's the only what it can see and access.
It's unclear what "widget" framework you're using since you didn't tell/tag anything about it, while that's unrelated to JSP. Anyway, if it has done its job right, then you should see <input> elements with an id attribute in the generated HTML code like so:
<input type="text" id="someId">
Now, in the JS code you can easily grab elements from the HTML DOM using document.getElementById().
var inputElement = document.getElementById('someId');
If it's an input element, then you can get its value as follows:
var inputValue = inputElement.value;
You can compare string values in JavaScript as follows:
if (inputValue == 'foo') {
// Value is foo.
} else {
// Value is not foo.
}
Note that this is not the way to compare strings in Java! You would rather use String#equals() for this.
You can also grab a different element from the DOM, e.g. a <div id="message"> which you've added yourself.
var messageElement = document.getElementById('message');
You can in turn set some text in its body as follows:
messageElement.firstChild.nodeValue = 'some message';
Do the math :)
See also:
W3Schools JavaScript tutorial
W3Schools HTML DOM tutorial
Essential JavaScript - tutorial
By the way, the "style" you're using in your code is pretty old fashioned. It might happen that you inherited a legacy project, okay, but that 90's style is really not the right way to start HTML/JSP with nowadays.

jQuery selector for option tag value attribute returns null

I am trying to change the selected option in a select dropdown box with jQuery. I have it set so that it finds the hash tag at the end of the URL and based on that hash tag it changes the selected option in the select box.
Most of my code is functional, it successfully finds the hash tag and executes the if statement that corresponds with it. However, when it goes to execute the "then" section of the statement when it goes to the selector for the option (which uses an attribute selector based on the value attribute of the option tag) it returns null. If figured this out with firebug, in the console it says that the selector is null.
Here is my code:
$(document).ready(function() {
var $hash = window.location.hash
if($hash == "#htmlcss") {
$('option[value="HTML/CSS Coding"]').attr("selected","selected")
}
if($hash == "#php") {
$('option[value="PHP Coding"]').attr("selected","selected")
}
if($hash == "#jscript") {
$('option[value="Javascript and jQuery Coding"]').attr("selected","selected")
}
if($hash == "#improv") {
$('option[value="General Website Improvements"]').attr("selected","selected")
}
if($hash == "#towp") {
$('option[value="Website Conversion to Wordpress"]').attr("selected","selected")
}
if($hash == "#wptheme") {
$('option[value="Wordpress Theme Design"]').attr("selected","selected")
}
if($hash == "#complete") {
$('option[value="Complete Website Creation"]').attr("selected","selected")
}
if($hash == "#server") {
$('option[value="Web Server Configuration"]').attr("selected","selected")
}
});
So to clarify, when I enter in a url that ends in the #php hash tag, for example, the desired action does not occur which would change the "PHP Coding" option to the selected one by using the "selected" html attribute however the selector for the particular option tag returns null. Is there a problem with my syntax or is my code not functioning in the way that I think it should? Thanks very much.

You can slim it down and resolve your selector issue at the same time, just use .val() like this:
var hashmap = {
htmlcss: "HTML/CSS Coding",
php: "PHP Coding",
jscript: "Javascript and jQuery Coding",
improv: "General Website Improvements",
towp: "Website Conversion to Wordpress",
wptheme: "Wordpress Theme Design",
complete: "Complete Website Creation",
server: "Web Server Configuration"
};
$(function() {
var $hash = window.location.hash.replace('#','');
$("#IDOfSelectElement").val(hashmap[$hash]);
});
This approach sets the value on the <select> (finding it by it's ID) using .val(), which selects the <option> with the value matching what you passed in, this resolves escaping issues as well. However, I'm not certain the values you have are the actual value="" portion, they seem like the text of the <option>...make sure you're using the value="" portion. The other optimization is that this uses an object map to make this much easier to maintain :)

You shouldn't use quotes in the value selector, also I think you might need to escape the slash, i.e.:
$('option[value=HTML\\/CSS Coding]').attr("selected","selected")
For more info, see http://api.jquery.com/category/selectors/

Probably just add this code before your if statements:
$('option').removeAttr('selected');
Though know that if you have more then one select on the page, then that affects all of them.

Why not to assign id for each select option? It would make your code more tidy
$(document).ready(function() {
$(window.location.hash).attr("selected","selected");
});