We Keep Coding

innerHTML reassignment not reflecting on browser

I'm trying to replace the HTML in an element on my main page.
This is the JS function I am calling:
var insertHtml = function(selector,html) {
var targetElem = document.querySelector(selector);
console.log(html);
targetElem.innerHtml = html;
};
The new HTML is displaying on the console, however, no changes are reflected on the browser.
If it helps, these are the calling functions:
dc.loadMenuCategories = function () {
showloading("#main-content");
$ajaxUtils.sendGetRequest(categoriesURL, buildAndShowCategoriesHTML);
};
function buildAndShowCategoriesHTML (categories) {
$ajaxUtils.sendGetRequest(
categoriesTitleHTML,
function (categoriesTitleHTML){
$ajaxUtils.sendGetRequest(
categoryHTML,
function (categoryHTML) {
var categoriesViewHTML =
buildCategoriesViewHtml(categories,
categoriesTitleHTML,
categoryHTML);
insertHtml("#main-content", categoriesViewHTML);
},
false);
},
false);
}
Does anyone know why these changes are not loading on the browser?

Chrome extensions access to varible

Hey I'm writing chrome extension and I need to get access to blurSpy in this code:
var updateCt = (function() {
var onBlurHandler = function () {
window.honestRespondentWarning_popup.open();
};
var blurSpy = new BlurSpy(onBlurHandler, null, -1);
$(function() {
if ( document.hasFocus() ) {
blurSpy.start();
} else {
$(window).one("focus", function() {
if ( document.hasFocus() ) {
blurSpy.start();
}
});
}
});
return function() {
document.forms["questionForm"]["wb"].value = blurSpy.getBlursCount();
eraseCookie('blurs');
setEndTimeCookie();
}
})();
This code is in script tag in site main html file. Is it doable?
ofc I used that trick to gain access to console-like js commands execution so my extension can do that if it is possible from console on site.

chrome.storage.sync.get Error

I've been trying to use chrome.storage.sync.get for the options part of my program but I've hit a snag.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("save").addEventListener("click", save_options);
});
function save_options() {
var priceNotif = document.getElementById('pricealert').value;
chrome.storage.sync.set({
priceAlert: priceNotif
}, function() {
// Update status to let user know options were saved.
console.log("price set: " + priceNotif);
setTimeout(function() {
status.textContent = '';
}, 750);
});
}
var test = chrome.storage.sync.get('priceAlert', function(data) {
test = data.priceAlert;
});
console.log("test price get: " + test);
The test variable is returning undefined, and how do I fix that?

if you are creating chrome extension then you can use Please confirm that you need to add needfull permission in manifest.JSON file. please refer below document.
https://developer.chrome.com/extensions/storage

Write own Javascript plugins for creating audio player

I write my own Javascript plugins for creating an audio player.
I created one in the AudioPlayer.js file:
(function ($) {
jQuery.fn.myPlayer = function (options) {
var defaults = {
id: "#myPlayer",
url: ""
};
var settings = $.extend({}, defaults, options);
return this.each(function () {
var AudioPlayer = $("<audio>");
AudioPlayer.attr('id', settings.id);
AudioPlayer.attr('controls', 'true');
AudioPlayer.appendTo(this);
var source = $("<source>");
source.attr('src', settings.url);
source.attr('type', 'audio/mp3');
source.appendTo(AudioPlayer);
});
}
}(jQuery));
Above code is in AudioPlayer.js, and add this reference to a "HTML" page, and
Now I am accessing this file in html page like this:
<script>
$(document).ready(function () {
$('.playerDemo').myPlayer({
id: "myAudio",
url: "https://vzstr.blob.core.windows.net/media/e2d4255c-a03a-45ac-b34a-42bd3101f902/59006.mp3"
});
});
</script>
Using above code my player will display on browser,
and I have two buttons one for play audio and second for paused audio,
how can achieve this functionality using Javascript plugins.
I want to write method for "PLAY" and "PAUSE" method in Javascript plugins.
How to achieve this functionality?

Write this code in AudioPlayer.js file.
(function ($) {
jQuery.fn.myPlayer = function (options) {
var defaults = {
id: "#myPlayer",
url: ""
};
var settings = $.extend({}, defaults, options);
var AudioPlayer = $("<audio>");
AudioPlayer.attr('id', settings.id);
AudioPlayer.attr('controls', 'true');
AudioPlayer.appendTo(this);
var source = $("<source>");
source.attr('src', settings.url);
source.attr('type', 'audio/mp3');
source.appendTo(AudioPlayer);
var AuPlayer = AudioPlayer[0];
return {
play: function () {
AuPlayer.play();
},
pause: function () {
AuPlayer.pause();
}
}
}
}(jQuery));
Bellow code in HTML File,
<script>
var playerDemo;
$(document).ready(function () {
playerDemo = $('.playerDemo').myPlayer({
id: "myAudio",
url: "https://vzstr.blob.core.windows.net/media/e2d4255c-a03a-45ac-b34a-42bd3101f902/59006.mp3"
});
});
function playAudio() {
playerDemo.play();
}
</script>

Two jQuery codes but only one executed

I have two functions in jQuery. One of them looks for image extensions from form and another is getting image dimensions and triggers an alert() when an image is not big enough.
Both functions are correctly executed in demos but together only one is executed. Only part where extensions is getting is executed. Sorry for the length of the code but it was the only way to show the problem.
(function ($) {
$.fn.checkFileType = function (options) {
var defaults = {
allowedExtensions: [],
success: function () {},
error: function () {}
};
options = $.extend(defaults, options);
return this.each(function () {
$(this).on('change', function () {
var value = $(this).val(),
file = value.toLowerCase(),
extension = file.substring(file.lastIndexOf('.') + 1);
if ($.inArray(extension, options.allowedExtensions) == -1) {
options.error();
$(this).focus();
} else {
options.success();
}
});
});
};
})(jQuery);
$("#filput").on('change', function () {
var fr = new FileReader;
fr.onload = function () { // file is loaded
var img = new Image;
img.onload = function () {
// image is loaded; sizes are available
var w = img.width
if (w < 500) {
alert("too small");
} else {
alert("big enough");
}
};
img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});
$(function () {
$('#filput').checkFileType({
allowedExtensions: ['jpg', 'jpeg', 'png'],
error: function () {
alert('error');
}
});
});

Only part where extentions is getting is executed
That code is wrapped by $(function() { ... }); so, you should probably put both pieces of code there:
$(function() {
$("#filput").on('change', function () {
var fr = new FileReader;
// ...
});
$('#filput').checkFileType({
// ...
});
});
Based on what you have described, the input element wasn't present yet at the time your code is run; by putting both code segments in the DOMReady event handler, you're making sure it exists.