I'm not using any JS code, but the console gives me the error
Uncaught TypeError: Cannot read property 'addEventListener' of null
Here is my html code
<div id="navbar">
<div class="width2">
<div class="navbarchild right">
<div class="NBsearch right">
<input type="text" placeholder="search" />
</div>
<div class="NBuser right">
<div class="NBpicture left">
</div>
<div class="NBreputation left">
</div>
<div class="NBbadge left">
</div>
</div>
</div>
<div class="navbarchild left">
</div>
</div>
</div>
*I tried to see where the problem come from,and it seems that it comes from
<input type="text" placeholder="search" />
because when I delete this line the error don't appear.
Disable your extensions one by one from chrome://extensions (i'm supposing you're using chrome, for FF check this link) and see which one causes the problem there's no point in disabling all of them.
And as an answer to you're question about how a can an extension do that the simple answer is that it's just javascript, html and css injected into you page(not really experienced in this field).
For more information about chrome extensions check here
To know which Extension was loaded on your page you can go (when extensions are activated) in the Dev Tool (F12) -> Source -> Content scripts.
This is for Chrome.
Related
I have some Bootstrap-based HTML pages with some javascript and internal CSS, served in Flask, using Jinjja templates. It works perfectly fine on Windows and Android, using Chrome. But when I try to click certain buttons while on an iPhone (Chrome) or on Safari, they don't work. There's no error message in Chrome either.
Here's a sample of the button I used:
<div class="container mt-4">
<form action="/skill" method="get">
<div class="btn-group-vertical mt-10" style="width:100%">
<button id="Health" onClick="selection(this.id)" type="button" class="btn btn-secondary mb-3" style="background-color: #4a8bae;white-space: normal;">
<h4 class="display-5 pt-2">Health</h4>
<p class="mb-2 font-weight-normal">The centre of human happiness and well-being.</p>
</button>
</div>
</form>
</div>
After clicking the button, it's supposed to sessionstorage the id chosen.
Please advise on what I can do to fix this! Let me know if I should post any other information. Thank you!
I had the same situation, but at least in my case I just turned of the safari's pop-up blocker (at the iphone settings) and everything works fine...
I'm getting the error "Cannot read property 'offsetWidth' of undefined or null reference" in my website since I commented out 2 divs in a bootstrap carousel. This carousel was developed by someone else who is unavailable to me. I don't see how commenting out a div would cause this error. It does not occur when the divs are left in.
<!-- Carousel -->
<div id="homepage-slider">
<div id="feature-wrap">
<div class="iosSlider">
<div class="slider">
{2}
<div class="item" id="2">
<img src="{0}/Content/images/home/index/myPic.jpg" style="width: 100%;" />
</div>
<div class="item" id="3">
<img src="{0}/Content/images/home/index/myPic2.jpg" style="width: 100%;" />
</div>
<div class="item" id="4">
<img src="{0}/Content/images/home/index/myPic3.jpg" style="width: 100%;" />
</div> <!-- Commenting out this div -->
</div>
<div class="iosSliderButtons">
{3}
<div class="button"></div>
<div class="button"></div>
<div class="button"></div> <!-- Commenting out this div -->
</div>
</div>
<div id="nextSlide"></div>
<div id="previousSlide"></div>
</div>
</div>
This HTML is called from another file, called Index.cshtml like so:
<div id="view-home">
#Html.Raw(Resources.HtmlContent.HomePageContent.FormatWith(host,
currentWebAlias, myHTML1, myHTML2))
</div>
myHTML1 & myHTML2 are set earlier in the file, and this HTML is then used to populate the placeholders (marked {2} and {3}) in the page above.
I'm also getting a similar error, except it refers to 'unobtrusive'.
This all works fine when the divs are not commented out, but I don't see how removing a div would cause these errors to occur all of a sudden.
Any help greatly appreciated!
Commenting out a div can cause an error since that element is referenced in carrousel plugin. To be precise since javascript cannot find that element which is now undefined, accessing elements property of undefined causes this error.
Whoever wrote this plugin did not have in mind for you to play around with its structure, since he made it error prone.
This property is most likely used in calculation for carrousel plugin slide effects, you can check more about it here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
I'm trying to use Affectiva's Web SDK (Javascript) to detect emotions via a Camera Stream. I tried using it in JS Fiddle. It works fine but when I got the code from JSFiddle and used in on my Java Web Project in Eclipse, the Web Camera prompt isn't showing up. Nor can it access the Web Cam. Here's the code:
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="affdex_elements" style="width:680px;height:480px;"></div>
<div class="col-md-4">
<div style="height:25em;">
<strong>EMOTION TRACKING RESULTS</strong>
<div id="results" style="word-wrap:break-word;"></div>
</div>
<div>
<strong>DETECTOR LOG MSGS</strong>
</div>
<div id="logs"></div>
</div>
</div>
<div>
<button id="start" onclick="onStart()">Start</button>
<button id="stop" onclick="onStop()">Stop</button>
<button id="reset" onclick="onReset()">Reset</button>
<h3>Affectiva JS SDK CameraDetector to track different emotions.</h3>
<p>
<strong>Instructions</strong>
</br>
Press the start button to start the detector.
<br/> When a face is detected, the probabilities of the different emotions are written to the DOM.
<br/> Press the stop button to end the detector.
</p>
</div>
</div>
</body>
The Javascript file is similar to the contents in https://jsfiddle.net/affectiva/opyh5e8d/show/
I copied the code but the camera doesn't work on my end when I used it on Eclipse. I'm using Chrome as my browser.
Background:
I administer an Amazon shop for a category that is unsupported by the Amazon bulk upload tool. The shop contains (once this question is resolved) +150 individual products with 6-9 preview images each and in 6 EU sites (huge manual upload effort).
I decided to use Selenium and my basic python skills to automate the upload.
Problem:
All works perfectly fine except for image upload. I had used this code in the past to send images into an input field:
driver.find_element_by_css_selector('input[type="file"]').send_keys('path/to/local/image')
Modifying this to fit to the image upload page in question:
driver.find_element_by_id('main_image_url').send_keys('path/to/local/image')
Returns a sea of red:
File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/selenium/webdriver/remote/errorhandler.py", line 192, in check_response
raise exception_class(message, screen, stacktrace)
ElementNotVisibleException: Message: element not visible
(Session info: chrome=53.0.2785.116)
(Driver info: chromedriver=2.23.409710 (0c4084804897ac45b5ff65a690ec6583b97225c0),platform=Mac OS X 10.11.6 x86_64)
Also tried:
I have read around a bit but my knowledge of Javascript is null so I have blindly tried a few javascript snippets to make the element visible first to no avail.
driver.execute_script('document.getElementById("main_image_url").style.visibility = "visible";')
I've also read some solutions involving trying to navigate the actual dialogue window with complicated combinations of send_keys() but sound like trouble.
I'm on a Mac and using the Chrome driver.
Any tips much appreciated
HTML element of page:
<div id="main_image_url-wrapper" class="a-row a-spacing-medium input-container">
<div data-attribute-name="main_image_url"
data-image-index="0" class="a-row a-grid-vertical-align a-grid-center ilui-image-input-container image-not-selected hide-remove-button ilui-post-attribute">
<input id="main_image_url" name="main_image_url"
value="" cssClass="image-source-of-truth"
type="hidden" autocomplete="off"
/>
<div class="a-row">
<label for="main_image_url" class="label">
<span class="attribute-label-text">Main Image
<span class="a-size-base a-color-tertiary a-text-italic a-text-normal">
(required)
</span> </span> <span class="a-declarative"
data-action="a-popover" data-a-popover="{"name":"attributeHelpmain_image_url","inlineContent":"The URL where a main image of the product is located. It's important that this is supplied for all products."}">
<span class="help-icon"></span> </span>
</label>
</div>
<div class="a-row ilui-image-wrapper ilui-visualization-element">
<span class="a-declarative" data-action="image-select-main_image_url"
data-image-select-main_image_url="{}"
id="image-container-declarative">
<div tabindex="0" class="ilui-image-select-container">
<div id="image-camera-icon" class="icon-container">
<i class="icon"></i>
<ul class="a-nostyle a-vertical error-list image-error-list"></ul>
</div>
</div>
</span> <img src="" class="ilui-img-thumbnail"
/>
<div class="image-loading-overlay a-hidden">
<div class="a-section upload-progress-meter image-progress-bar">
<div class="a-meter" aria-label="0%">
<div class="a-meter-bar"
style="width: 0%;"></div>
</div> <span class="percentage"></span> </div>
</div> <span class="a-declarative" data-action="image-remove-button-main_image_url"
data-image-remove-button-main_image_url="{}">
<div tabindex="0" class="remove-image-button">
<i class="a-icon a-icon-close"></i>
</div>
</span> </div>
</div>
I am working with a new angular app and need to make it backward compatible to IE8. From what it looks like it loads in my routing info, loads the template (to a point) but in the concole log i see the following error.
TypeError: Object doesn't support this property or method <div
class=ng-scope ng-view>
This is what my index html page looks like:
<!DOCTYPE html>
<html id="ng-app" ng-app="app">
<head>
<!--Add dependencies-->
<script src="jquery.min.js"></script>
<link rel="stylesheet" src="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="ui-bootstrap.js"></script>
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('menu');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
</head>
<body>
<div id="wrapper">
<header class="header header-fixed">
<section class="navbar navbar-inverse docs-navbar-primary">
<div class="container">
<div class="row">
<div class="col-md-7" style="color:white; margin-top:14px;">Thinflash: Fullscreen Demo</div>
</div>
</div>
</section>
</header>
<section role="main" class="container main-body">
<div ng-view></div>
</section>
<!--Add AngularJs Files-->
<script src="swfObject.js"></script>
<script src="app.js"></script>
<script src="appControllers.js"></script>
<script src="thinflash.js"></script>
</div>
</body>
</html>
Template.html :
<div ng-controller="thinflash.controllers.playback">
<div ng-controller="app.controllers.fullscreen">
<div class="mainWrapper" id="stageWrapper">
<label>SWF Object Display </label>
<div class="swfWrapper" style="width:320px; height:240px;" id="swfStage">
<div class="tf-container" tf-swf tf-interface="flashInterface" tf-src="thin.swf" tf-min-version="11.0.0"></div>
</div>
</div>
<div class="col-md-5">
<form role="form">
<!-- Video Playback Controls -->
<div class="row">
<div class="form-group col-md-7">
<label>Select Preloaded Video:</label>
<select class="form-control" ng-model="myVideo" ng-init="myVideo = videos[2]" ng-change="changeVideo(myVideo)" ng-options="v for v in videos"><option></option></select>
</div>
</div>
<div class="row">
<div class="form-group col-md-7">
<button type="button" class="btn btn-primary" ng-click="pausePlaybackToggle()">Pause</button>
<button type="button" class="btn btn-primary" ng-click="playVideo()">Play</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-7">
<label>Volume Control:</label>
<input style="width:50%;" type="range" id="slider" min="1" max="100" step="1" ng-model="volume" ng-change="changeVolume()">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label>Size Controls:</label><br/>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(1)">Small</button>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(2)">Medium</button>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(3)">Large</button>
</div>
</div>
</form>
</div>
</div>
</div>
Again when the app loads in IE8 it appears that the template loads (or starts too ... but i get this error)
Add html5 support for IE8 by using something like html5shiv or this little snippet:
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('menu');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
Edit
Fixing an "Object does not support this method or property" on IE can be a beast, cause it isn't telling you anything. It's not telling you what object, it's not telling you what property, it's not telling you what method and worst of all it's not telling you where this actually occurred. See the pattern? Effectively it's saying; something bad has happened somewhere, go figure. This is one of the reasons why everyone loves IE.
Adding the above snippet has probably solved a problem but then another problem popped up, which produced the same brilliant error message. Fixing this breadcrumb adventure of error messages by posting each new involved piece of html can take a very long time and should rather be discussed with the helpdesk of IE. They have an answering machine telling you to upgrade to their new crappy box of other issues. Troubleshooting this problem via Stackoverflow is like shooting satellites out of the sky with a water pistol, in the dark, blindfolded and drunk.
Some other things you might consider:
Move the snippet to above any other script include
Replace the snippet with html5shiv
Downgrade the include version AngularJS. Version 1.1.5 seems to work for IE7. Version 1.3 does not support IE8 at all.
Check the guide lines of Angular IE compatibility
Start commenting code (javascript/html) to better isolate the part that is causing the problem. Keep in mind that multiple problems generate the same error message in IE.
Upgrade to their new crappy box of other issues.
I wanted to take a second and answer this incase someone else has the same type of thing happen. I tried to polyFill and that didnt work so I tried running the code in IE9 while running in IE8 mode hoping to get a different error .... Voila ....
null hit the nail on the head ... it was in the JS and it was because I was doing document.addListener(). Luckily I was able to quicly decide that the functionality that this supported was not important enough to pull my hair out so i removed that line in my js...
Everything else worked .... Hopefully this can be of some help to someone in the future as IE provides stellar error messages