I am encountering a problem with html/javascript that I couldn't find a solution for on the web for the last ~7 hours eventhough similar questions were asked! All offered solutions that I tried didn't help me.
My problem is the following error: Uncaught ReferenceError: function is not defined at HTMLDivElement.onclick
I get this error when pressing a button that should trigger the function. The function is called onclick and the onclick attribute is attached to a div object.
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
};
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
If anybody could help me with that it would be very appreciated.
PS: This is my first HTML/CSS/JS project and I don't really know what I'm doing. Also, I am using Framework7 for the project, idk if that is important.
you may forgot script tag . try this anyway..
<html lang="en">
<head>
<title>Login page</title>
</head>
<script>
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
}
</script>
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src=""></script>
</html>
<html lang="en">
<head>
<title>Login page</title>
</head>
<script>
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
}
</script>
<div class="article-element">
<div class="picture_article-element">
<img src="" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src=""></script>
</html>
i hope this solved your problem, i changed the div tag into a clickable button tag so the 'onclick' function can execute....goodluck
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
};
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<!-- replaced div tags with button tags -->
<button class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</button>
<br /><br /><br /><br />
</div>
Related
I am trying to load html content from another file to my main page using JQuery. I am doing this because I have a navigation bar and footer that will be constant throughout all the pages. I wrote them independently in there own files first and tested each of them so I know they work when they are statically placed into the html file. However, when I try to load them using JQuery loadHTML function I am having issues getting them on the page.
Here is my index.html file for reference:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css">
<link href="NavBarStyle.css" rel="stylesheet">
<link href="FooterStyle.css" rel="stylesheet">
</head>
<body>
<header></header>
<div><h1>Content Goes Here</h1></div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src ="NavBar.js"></script>
<script>
$(document).ready(function () {
$("header").load("NavBar.html", function(){
$("header").enhanceWithin();
});
$("footer").load("Footer.html", function(){
$("footer").enhanceWithin();
});
});
</script>
</body>
</html>
My NavBar.html
<div class = "navbar">
<div class="FB">
<iframe id="share" class = "facebook-bt" src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&size=small&width=96&height=20&appId" width="96" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
<iframe id="like" class = "facebook-bt"src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&share=true&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
<div class="navbar-items">
<div class="navbar-links">
<div id = "big" class="dropdown">
<button class="dropbtn">ABOUT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
MEET US
TESTIMONIALS
OFFICE TOUR
HOURS
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">PATIENTS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
WHAT TO EXPECT
PAPERWORK
FAQ's
HEALTH TIPS
BLOG
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">SERVICES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CHIROPRACTIC
NUTRITION
MASSAGE
OTHER
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">REVIEWS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
REVIEW US
TESTIMONIALS
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">CONTACT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CONTACT INFO
LOCATION
</div>
</div>
<div class="burger">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div class="small-Nav">
<div class="navbar-links">
<div id = "small" class="dropdown">
<button class="dropbtn">ABOUT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
MEET US
TESTIMONIALS
OFFICE TOUR
HOURS
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">PATIENTS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
WHAT TO EXPECT
PAPERWORK
FAQ's
HEALTH TIPS
BLOG
</div>
</div>
<div id = "small" class="dropdown-small">
<button class="dropbtn">SERVICES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CHIROPRACTIC
NUTRITION
MASSAGE
OTHER
</div>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">REVIEWS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
REVIEW US
TESTIMONIALS
</div>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">CONTACT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
CONTACT INFO
LOCATION
</div>
</div>
</div>
</div>
</div>
<a href = "#">
<div class = "logo-circle">
<div class="logo"></div>
</div>
</a>
My footer is set up the same way as the NavBar.html file only the content is slightly different.
What am I doing wrong that is causing the files to not load up?
You don't need enhanceWithin call, so your code should look like this:
$(document).ready(function () {
$("header").load("NavBar.html");
$("footer").load("Footer.html");
});
Check load method documentation here for details.
I also suggest checking paths to files and their names (maybe you are getting 404 errors)
Try to debug your issue through dev. console by pressing F12.
You should see several errors. Something like Failed to load resource: net::ERR_FAILED and cors.
Are you running a webserver or index.html directly from the folder?
The problem is .load doesn't run directly please read up on load from jquery as the answer above mentions.
You will need to run index.html through your webserver and you will see the file load the requested file.
I get this as message:
header
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header></header>
<div><h1>Content Goes Here</h1></div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("header").load("NavBar.html", function(){
// $("header").enhanceWithin(); // Ignoring this line since question is not asking to fix the errors regarding enhance. I'll leave that upto you.
});
});
</script>
</body>
</html>
You can simply use without JQuery as well
<header>
<include src="My NavBar.html"></include>
</header>
<footer>
<include src="My Footer.html"></include>
</footer>
everybody, I'm trying the first example in
https://semantic-ui.com/collections/menu.html
it should work when hovering it any idea I'm not getting any error in the console but the dropdown not working not even when I click nothing happens
may this happens because I'm using semantic-ui CDN ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dev College</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</head>
<body>
<div class="ui text menu">
<div class="item">
<img src="default.png">
</div>
<a class="browse item">
Browse Courses
<i class="dropdown icon"></i>
</a>
<div class="ui right dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Applications</div>
<div class="item">International Students</div>
<div class="item">Scholarships</div>
</div>
</div>
</div>
<div class="ui flowing basic admission popup">
<div class="ui three column relaxed divided grid">
<div class="column">
<h4 class="ui header">Business</h4>
<div class="ui link list">
<a class="item">Design & Urban Ecologies</a>
<a class="item">Fashion Design</a>
<a class="item">Fine Art</a>
<a class="item">Strategic Design</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Liberal Arts</h4>
<div class="ui link list">
<a class="item">Anthropology</a>
<a class="item">Economics</a>
<a class="item">Media Studies</a>
<a class="item">Philosophy</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Social Sciences</h4>
<div class="ui link list">
<a class="item">Food Studies</a>
<a class="item">Journalism</a>
<a class="item">Non Profit Management</a>
</div>
</div>
</div>
</div>
</body>
</html>
The example code doesn't include any javascript like the other examples on the same page. If you want the dropdowns to work look into the dropdown documentation under the usage tab which talks more about coupling the dropdowns inside the menu. Dropdowns. And the CDN is fine.
I connected my templete.php to style.css but when I am changing anything in templete.php, it's showing the result but if I change anything in the stylesheet, it shows no result. what should I do?
My website is not live. i am doing it on wamp server.
templete.php
<!DOCTYPE html>
<html>
<head lang="en">
<title>SEO SOBER</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Merienda"
rel="stylesheet"
<head>
<body>
<header id="particles-js">
<?php
include "navbar.php";
?>
</header>
<!--..... header ends.......-->
<div class="clients">
<h3>Our Clients</h3>
<img class="client-img" src="images/clients.png">
</div>
<!--clients ends -->
<div class="container-About">
<div class="text">
<h3>SEO SOBER Digital Story</h3>
<p>about company</p>
</div>
<div class="button">
READ MORE
</div>
</div>
<!-- about ends -->
<div class="features">
<h3>Services</h3>
<div class="maincontainer">
<!-- first card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/seo-gif-10.gif">
<h4>Search Engine Optimization</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- second card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/web-design-service.gif">
<h4>Web Design</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- third card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/Development.gif">
<h4>Web Development</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- fourth card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/social.gif">
<h4>Social Media Marketing</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
<!-- services end-->
<script src="js/particles.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
please tell me what to do...
I am trying to do changes for half an hour but nothing happenes.
I also add the particles effect. is that the problem?
i think you are loading your cache, you have to hard reset your page. Try reloading like this on your page:
> -Hold the Ctrl key and press the F5 key.
> -Hold the ⇧ Shift key and click the Reload button on the navigation toolbar.
> -Hold the Ctrl key and click the Reload button on the navigation toolbar.
> -Hold the ⇧ Shift key and press the F5 key.
<li><a id="customPopover">Data Source One</a>
<i class="fa fa-times"></i>
<div class="axis_popover left">
<div class="axis_popover_title">Title</div>
<div class="axis_popover_content">
<p><input type="text" class="form-control box_ip"/></p>
<p><button class="btn">button</button></p>
</div>
</div>
having script like this
having html code like this and i need to render in react.
You can refer this example that will run using ReactJS. It will give you basic idea about ReactJS.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- use react js 15.0 js -->
</head>
<body>
<div id="showHere"></div>
<script type="text/babel">
var Example = React.createClass({
render: function() {
return ( <div>
<a id="customPopover">Data Source One</a>
<i class="fa fa-times"></i>
<div class="axis_popover left">
<div class="axis_popover_title">Title</div>
<div class="axis_popover_content">
<p><input type="text" class="form-control box_ip"/></p>
<p><button class="btn">button</button></p>
</div>
</div>
</div>)
}
});
ReactDOM.render(
<div>
<Example></Example>
</div>,
document.getElementById('showHere') );
</script>
</body>
</html>
I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>
I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});
I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.