Is it possible to convert this piece of jquery code to javascript?

[mahdiweb]

I want to know is it possible to convert this piece of jquery code to javascript

var port = chrome.runtime.connect({name: "SNT"});
$(document).ready( function() {
    chrome.storage.local.get('SNT', function(items) {
        $("#SNT").text(items.SNT);
    });
    $("#SNT").bind('keyup', function() {
        chrome.storage.local.set({ 'SNT': $(this).val() }, function(){});
    });
});

for your information the SNT is the Id of a textarea :

<textarea id="SNT"></textarea>

Thank you in advance

[m_hutley]

@mahdiweb

$(document).ready(

document.addEventListener('DOMContentLoaded',...

@mahdiweb

$("#SNT")

document.getElementByID

@mahdiweb

.text(

.innerHTML

@mahdiweb

.bind(

.addEventListener

@mahdiweb

$(this)

e.eventTarget or this

@mahdiweb

.val()

.value

[mahdiweb]

hello and thank you my dear friend @m_hutley hope you are well,
I modified the code as follows:

var port = chrome.runtime.connect({name: "SNT"});

document.addEventListener('DOMContentLoaded', () => {

  chrome.storage.local.get('SNT', function(items) {
     document.getElementById("SNT").innerHTML = items.SNT;
  });

  document.getElementById("SNT").addEventListener("keyup", function(){
       chrome.storage.local.set({ 'SNT': this.innerHTML }, function(){});
  },false);

 });

when i test the code it doesn’t show me any error message but it doesn’t work i don’t know why i think something is missing

[Paul_Wilkins]

Does the code with jQuery code work?

If it does, then gradually replace parts of jQuery with vanilla JavaScript, until you find the part that causes it to stop working.

[mahdiweb]

it’s good thank you very much, it works.

[mahdiweb]

hi @m_hutley ,

sorry for the disturbance but I have another small problem if you can guide me please,
I have the value “undefined” on the Textarea field with the following code

document.addEventListener(‘DOMContentLoaded’, () => {

chrome.storage.local.get(‘SNT’, function(items) {
document.getElementById(“SNT”).innerHTML = items.SNT;
});

document.getElementById(“SNT”).addEventListener(“change”, function(e){
chrome.storage.local.set({ ‘SNT’: e.target.value}, function(){});
},false);

});

I tried to put it in a function but it doesn’t work

[Thallius]

Why do you use chrome.storage? What about users using other browsers?

[mahdiweb]

chome and the browser allowed where I work

[m_hutley]

You have undefined… where, specifically?

[Paul_Wilkins]

@m_hutley

You have undefined… where, specifically?

About the only part of the code that could result in that is the following:

@mahdiweb

document.getElementById(“SNT”).innerHTML = items.SNT;

I would hazard a guess that the textarea field has an identifier of SNT.

[m_hutley]

well thats pulling from the items setup, so if OP is getting undefined there, the problem isnt in the jquery->javascript transformation, its in their storage system

That said, OP didnt use my translations correctly…

@mahdiweb

chrome.storage.local.set({ 'SNT': $(this).val() }, function(){});

@mahdiweb

chrome.storage.local.set({ 'SNT': this.innerHTML }, function(){});

@m_hutley

@mahdiweb

.val()

.value

[mahdiweb]

@mahdiweb

this.innerHTML

Hi @m_hutley,

The code you gave me works very well without any error but the only problem is the “undefined” error that appears on the textarea at the first launch of the extension and that I have to delete to write.

[m_hutley]

@mahdiweb

  chrome.storage.local.get('SNT', function(items) {
     document.getElementById("SNT").innerHTML = items.SNT;
  });

Well that’s a logical error in your code here. You dont check to see if items.SNT exists.

[mahdiweb]

Hi @m_hutley,

Perfect, really I don’t know how to thank you, you are very kind thank you very much.