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
Related
The intention is for the extension to grab the selected text and pop it into a card search engine, then return the resulting webpage as a hyperlink attached to the selected text. The first half of that works fine however the printing seems to select the entirety of the paragraph instead of just the intended selected area. Is there a fix to this?
function websiteCall() {
const hostText = getSelectedText();
const linkage = searchFunction(cleanName(hostText));
if (linkage) {
Logger.log(linkage);
DocumentApp.getActiveDocument().getSelection().getRangeElements()[0].getElement().asText().editAsText().setLinkUrl(linkage);
}
}
I initially asked on stackOverflow a similar question which resulted in the final DocumentApp... line. However, it has the described problem and I wasn't able to catch it at the time due to how I use the script in my work.
I believe your goal is as follows.
You want to set the hyperlink to the selected text. The text is part of a paragraph.
In your script, a whole paragraph is used. And, in your script, when a text is not selected, an error occurs. In this case, how about the following modification?
Modified script:
function websiteCall() {
const hostText = getSelectedText();
const linkage = searchFunction(cleanName(hostText));
if (linkage) {
Logger.log(linkage);
const select = DocumentApp.getActiveDocument().getSelection();
if (select) {
const ele = select.getRangeElements()[0];
ele.getElement().asText().editAsText().setLinkUrl(ele.getStartOffset(), ele.getEndOffsetInclusive(), linkage);
}
}
}
When you select a text of a part of a paragraph and run the script, the hyperlink of linkage is set to the selected text.
References:
Class RangeElement
setLinkUrl(startOffset, endOffsetInclusive, url)
Is it possible to assign HTML text within an element to a JavaScript variable? After much Googling, I note that you can assign HTML elements to a variable, but I want the actual text itself.
Details about my goal:
I am currently working on a CRUD application, and with the click of a delete button, a modal will display and ask the user for confirmation before deleting the record. Once the button has been clicked, I want to retrieve HTML text within a specific element used for AJAX call data. However, what I have tried so far is not being logged to the console; even when I change the global variable to var deleteLocationID = "test"; I doubt the modal displaying will affect the click function?
The code:
var deleteLocationID;
$("#deleteLocationBtn").click(function () {
deleteLocationID = $(document).find(".locationID").val();
console.log(deleteLocationID);
});
What I have tried so far:
Changing "deleteLocationID = $(document).find(".locationID").val();" to the following variations:
deleteLocationID = $(document).find(".locationID").html();
deleteLocationID = $(".locationID").val() / deleteLocationID = $(".locationID").html();
deleteLocationID = document.getElementsByClassName("locationID").value;
Any help would be much appreciated.
Use the text() method from JQuery, with this you can get the text inside of your element.
Use this way, it may help you:
deleteLocationID = $(document).find(".locationID").text()
Here is example of getting text from class element:
$('.locationID').text()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="locationID">45</div>
It depends on the type of element you are trying to find your value.
for input types you can find the value by .val() in jQuery like:
$(document).find(".locationID").val();
you can grab innerHTML of the element by .html() in jQuery like:
$(".locationID").html();
but if you want to grab innerText of an element you can use .text() in jQuery like:
$(".locationID").text();
I have a paper-autocomplete element as follows inside a <paper-card>
<paper-autocomplete label="Select HWName"
id="HWName"
on-autocomplete-selected="onDeviceSelect"
no-label-float="true"></paper-autocomplete>
in a given html file. I am accessing this from another file as follows
var hwName = document.querySelector("#HWName");
I need to be able to set some value in its input area on refresh, which i've remembered using localStorage API. I tried using
hwName.value = "test"
or
hwName.label = "test"
but it doesn't work. Even tried using setOption(option) as described here but doesn't work.
Is it possible to show some value on the paper-autocomplete element? I don't want to type, it should just set the last value.
You need to set text property of paper-autocomplete.
So your code will be like
hwName.text = "test"
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);
I have a dropdown box and I want to select the option based on value. Somehow I am getting handle to value say 3. Now I want to manually select the option which has got value 3.
I have tried something like this
selectBoxElement.options[selectedValues].selected = true;
where selectedValue = 3, but it is not working.
If using jquery (as per your tag), you can do:
$(document).ready(function() {
$("#yourSelectId option[value='3']").attr("selected", "selected");
});
Something like that should work (assuming $ is not overwritten and is alias for jQuery):
$(selectBoxElement).find('option[value="selectedValue"]').prop('selected', true);
or rather:
$(selectBoxElement).val(selectedValue);
which is simpler and achieves similar result :)
If you're using plain JS (except for the jQuery tag, you didn't explicitly say whether you want plain JS or jQuery), this should do what you want:
for (i=0; i<selectBoxElement.options.length; i++) {
if (selectBoxElement.options[i].value == selectedValues) {
selectBoxElement.options[i].selected=true;
break;
}
}
This is simple please try the following
When using the index position of the option tag within the select box
selectBoxElement.selectedIndex = index; // Where the index starts from 0
When using the value
selectBoxElement.value = value;// Where the value is the attribute defined within option tag
Hope this solves your problem.