so I have a database table called AnonymousComment which contains the following details:
[Id] INT IDENTITY (1, 1) NOT NULL,
[Title] VARCHAR (50) NULL,
[Comment] TEXT NULL,
[AgreeNumber] INT NULL,
[MetaId] VARCHAR (50) NULL,
[UserFeeling] TEXT NULL,
[AnonymousDate] DATETIME NULL,
Then I have a View (Index) that displays all the rows (Anonymous Comments), displaying the title of each comment then when you click on the title, it shows the title, UserFeeling (emoticon) and comment in a pop up modal as shown in the picture below
The code for the index view is as followed
#using System.Web.UI.WebControls
#using Siza.Models
#model IEnumerable<Siza.Models.AnonymousComment>
#{
ViewBag.Title = "Siza Anonymous";
Layout = "";
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!--Hover Popup CSS-->
<link href="~/Content/css/popuphover.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--JQuery Plugin-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!--some more of matt's crap-->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<style>
divider {
height: 1px;
width: 100%;
display: block; /* for use on default inline elements like span */
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
div#imageToggle img {
cursor: pointer;
}
.mystyle input[type="text"] {
height: 100px;
font-size: 36px;
}
.textwrap {
display: inline-block;
white-space: nowrap;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #808080;
font-size: 24px;
background: white;
-o-transition: color .2s ease-out, background 1s ease-in;
-ms-transition: color .2s ease-out, background 1s ease-in;
-moz-transition: color .2s ease-out, background 1s ease-in;
-webkit-transition: color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition: color .2s ease-out, background 1s ease-in;
}
</style>
</head>
<div class="row col-lg-12 text-center fade-in one">
#foreach (var item in Model)
{
<!-- Modal -->
<div class="modal fade" id="#item.Id" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Post Number: #item.Id</h4>
<h4 class="modal-title">#item.Title</h4>
<i class="#item.UserFeeling"></i>
</div>
<div class="modal-body">
<div class="floating-label-form-group controls">#Html.TextAreaFor(modelItem => item.Comment, new { #readonly = true })</div>
</div>
<div class="modal-footer">
<div align="center"><img src="http://pikcle.com/experiments/demo/skype/experiments/trans.png" class="emoticon thumbsup" title="thumbsup"/> <h4>Like</h4></div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<span class="wrapper" data-toggle="modal" data-target="##item.Id">
<div class="textwrap">
#Html.DisplayFor(modelItem => item.Title)
</div>
<span class="tooltip">
<div align="center">
<i class="#item.UserFeeling"></i><br />
<img src="http://pikcle.com/experiments/demo/skype/experiments/trans.png" class="emoticon thumbsup" title="thumbsup" /> Likes:#item.AgreeNumber
</div>
</span>
</span>
}
</div>
Wat I want to do, is to have a toggle between increment and decrement onclick of the like button in the modal. So when you click on the like button, it increments the AgreeNumber column by one for that specific row then it turns to unlike. Then if you click on the unlike button, it decrements the column by 1 for that row.
I was thinking have on click to call a javascript function which executes a raw sql statement which goes something along the lines of
this
#{
using (var context = new SizaData_1Entities()){
context.AnonymousComments.SqlQuery("UPDATE dbo.AnonymousComment SET AgreeNumber = AgreeNumber - 1 WHERE Id =" + item.Id);
}
}
Another curve ball for this problem is the fact that each row created with a for each item.
Help would be greatly appreciated
Thanks in advance
I hope the following answer will help you
Create 2 image for like and unlike
Razor
<img id="likeImg" src="~/image/like.png" />
<img id="unLikeImg" src="~/image/unlike.png" />
Access the controller action via the ajax call
Ajax
$(function () {
$("#likeImg").click(function () {
$.ajax({
url: '/Home/SetLike',
contentType: 'application/json; charset=utf-8',
type: 'POST',
cache: false,
success: function (result) {
// Success Statement
},
error: function (xhr, status, error) {
alert("Error");
}
});
});
$("#unLikeImg").click(function () {
$.ajax({
url: '/Home/SetUnLike',
contentType: 'application/json; charset=utf-8',
type: 'POST',
cache: false,
success: function (result) {
// Success Statement
},
error: function (xhr, status, error) {
alert("Error");
}
});
});
});
In controller action write the function for like and unlike
Controller
public void SetLike()
{
// Like Code here
}
public void SetUnLike()
{
// Unlike code here
}
Related
I am making a website with JS, CSS & HTML (No server side scripts).
I need to import a user's data from a JSON file (Given below is its format):
{
"car": "1320",
"ship": "1400",
"plane": "1520",
"helicopter": "1440",
"plots": "1,2,3,4",
"auctionplots": "",
"carowns": "1",
"planeowns": "4",
"helicopterowns": "2",
"shipowns": "3",
"addlist": "10,10,20,20,20,30,30,30,40,40,40,50,50,50,60,60,60,70,70,70,80,100",
"sublist": "10,10,20,22,40,40,40,60,70,70,90,90,90,110,120,120,140,140,140,160,180,200",
"history": "Server Started,car ~ Bought Plot 1 -60,Plot 1 ~ Rent Updated to 70,helicopter ~ Bought Plot 2 -60,Plot 2 ~ Rent Updated to 70,ship ~ Bought Plot 3 -100,Plot 3 ~ Rent Updated to 120,plane ~ Bought Plot 4 -100,Plot 4 ~ Rent Updated to 120,Plot 4 ~ Rent Updated to 220,car ~ Payed rent ($120) for Plot 4 to plane",
"session_id": "09042021"
}
This is the import page Monopoly Online
When I click Import data, each object should be inside a variable,
For Example :
"car": "1500" , It's value (1500) should be in a variable car.
Is that possible? Or Is there anything else I can do to achieve this?
I have done a solution for you. It parses the whole JSON you put into the text field and put it into the object, so you can do whatever you want to do with it. Please, have a look at the function parse
function show(id) {
document.getElementById(id).style.visibility = 'visible'
}
function hide(id) {
document.getElementById(id).style.visibility = 'hidden'
}
function parse(idTag) {
const input = $(idTag).val();
const object = JSON.parse(input);
for (const [key, value] of Object.entries(object)) {
$('#parsed').append(`<p>${key}: ${value}</p><br>`);
}
show('parsed')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" />
<link sizes="16x16 24x24 32x32 48x48 64x64" rel="shortcut icon" type="image/png" href="https://monopoly.hasbro.com/images/worldwide_header_hasbro_logo.png" />
<title>Import Module</title>
<style>
textarea#import {
display:block;
width: 40pc;
height: 30pc;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="main" class="mt-5 centre container-sm contact-form">
<fieldset>
<button onclick="show('results');hide('me');hide('hr');" id="me" class="btn btn-outline-dark">Insert Data <i class="fas fa-save"></i></button>
<hr id="hr"/>
<div class="results" id="results" style="visibility: hidden;">
<h2>Import Data</h2>
<hr />
<textarea placeholder="Paste Your JSON File Here" id="import"></textarea>
<button onclick="parse('#import')" class="mt-1 btn btn-outline-dark">Import Data <i class="fas fa-save"></i></button>
</div>
</fieldset>
</div>
<div id="parsed">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I'm a absolute beginner to Tizen. I want to make a little app. For this app, I want to add "More Options". It's not working and I really don't know. I followed each step in the documentation (I also followed this: https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/implementing-more-options) but this didn't help me either. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>List</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<link rel="stylesheet" href="css/more_options.css">
</head>
<body>
<div id="moreoptionsPage" class="ui-page">
<header class="ui-header ui-has-more">
<h2 class="ui-title">Einkaufsliste</h2>
<button type="button" class="ui-more ui-icon-overflow">More Options</button>
</header>
<div class="ui-content">
<ul class="shopping_list ul-listview">
</ul>
</div>
<!--Rectangular profile-->
<div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
<div class="ui-popup-header">Options</div>
<div class="ui-popup-content">
<ul class="ui-listview">
<li>Hinzufügen</li>
<li>Entfernen</li>
</ul>
</div>
</div>
<!--Circular profile-->
<div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
<div id="selector" class="ui-selector">
<div class="ui-item add-icon" data-title="Hinzufügen"></div>
<div class="ui-item remove-icon" data-title="Entfernen"></div>
</div>
</div>
</div>
</body>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/circle-helper.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/more_options.js"></script>
</html>
here's my more_options.js:
(function() {
var page = document.querySelector('#moreoptionsPage'),
popup = page.querySelector('#moreoptionsPopup'),
handler = page.querySelector('.ui-more'),
drawer = page.querySelector('#moreoptionsDrawer'),
selector = page.querySelector('#selector'),
helper,
clickHandlerBound;
function clickHandler(event) {
alert("calling");
if (tau.support.shape.circle) {
tau.openPopup(popupCircle);
} else {
tau.openPopup(popup);
}
}
page.addEventListener('pagebeforeshow', function() {
if (tau.support.shape.circle) {
helper = tau.helper.DrawerMoreStyle.create(drawer, {
handler: '.drawer-handler'
});
} else {
/* Shape is square */
clickHandlerBound = clickHandler.bind(null);
handler.addEventListener('click', clickHandlerBound);
}
});
page.addEventListener('pagebeforehide', function() {
if (tau.support.shape.circle) {
handler.removeEventListener('click', clickHandlerBound);
helper.destroy();
}
});
})();
and here's my more_options.css:
#moreoptionsDrawer {
display: none;
}
#media all and (-tizen-geometric-shape: circle) {
#moreoptionsDrawer {
display: block;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100%;
}
#moreoptionsPopup {
display: none;
}
}
I get errors when using tau.helper.DrawerMoreStyle.create and in the examples on Github it is not used at all. Check it out:
https://github.com/Samsung/TAU/tree/tau_1.2/examples/wearable/UIComponents/contents/assistviews
When I try to run, it not show my comment after I enter some text in comment box. Why? Also my another problem is the log show
ReferenceError: angular is not defined".
But I already place <script src="js/angular.min.js"></script> link to my js folder. What is wrong with my coding? I create app using ionic cordova and try to make comment that have upvote and downvote. Here the coding:
Script
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Vue.component('post', {
template: "#post-template",
props: ['post'],
data: function() {
return {
upvoted: false,
downvoted: false
};
},
methods: {
upvote: function() {
this.upvoted = !this.upvoted;
this.downvoted = false;
},
downvote: function() {
this.downvoted = !this.downvoted;
this.upvoted = false;
}
},
computed: {
votes: function() {
if (this.upvoted) {
return this.post.votes + 1;
} else if (this.downvoted) {
return this.post.votes - 1;
} else {
return this.post.votes;
}
}
}
});
var vm = new Vue({
el: "#app",
data: {
comments: [{}],
comment: ""
},
methods: {
postComment: function() {
this.comments.push({
title: this.comment,
votes: 0
})
this.comment = "";
}
}
});
CSS
a {
padding-left: 5px;
}
.disabled {
color: orange;
}
/* some simple transitions to make the upvote and downvote
buttons fade in as a visual cue for the user */
.glyphicon {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.glyphicon:hover {
opacity: 0.75;
cursor: pointer;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!--https://code.jquery.com/jquery-2.2.0.js-->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js-->
<!--https://cdn.jsdelivr.net/vue/1.0.16/vue.js-->
<script src="js/vue.js"></script>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div id="app">
<div class="container-fluid">
<ul class="list-group">
<post v-for="comment in comments" :post="comment"></post>
</ul>
<div id="comment-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" #keyup.enter="postComment">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" #click="postComment">Submit</button>
</span>
</div>
</div>
</div>
</div>
<template id="post-template">
<li class="list-group-item">
<i class="glyphicon glyphicon-chevron-up" #click="upvote" :class="{disabled: upvoted}"></i>
<span class="label label-primary">{{ votes }}</span>
<i class="glyphicon glyphicon-chevron-down" #click="downvote" :class="{disabled: downvoted}"></i>
<a>{{ post.title }}</a>
</li>
</template>
</ion-content>
</ion-pane>
</body>
</html>
I am in a bit trouble as I don't know how to implement the image popup in jquery for firebase. I have searched it on the internet but did not find the way how to implement it for the dynamic websites. I am having the following jquery code, can anyone help? I haven't found anything on stackoverflow also regarding this.
this is my html code
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>images</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="overrides.css">
</head>
<style>
.contentImage{
position: relative;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: 40%;
transition: .5s ease;
backface-visibility: hidden;
}
.image:hover {
opacity: 0.3;
}
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">here is the title</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Your images</li>
<li class="active">Public images</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container" id="contentHolder">
</div>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyB181Itkz9i9YjeJYLq9GbF94p8409wEfE",
authDomain: "farmyantra.firebaseapp.com",
databaseURL: "https://farmyantra.firebaseio.com",
storageBucket: "farmyantra.appspot.com",
messagingSenderId: "146534813177"
};
firebase.initializeApp(config);
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="timeline.js"></script>
</body>
</html>
and this is my js file
$(document).ready(function(){
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var token = firebase.auth().currentUser.uid;
queryDatabase(token);
} else {
// No user is signed in.
window.location = "index.html";
}
});
});
function queryDatabase(token) {
firebase.database().ref('/Posts/').once('value').then(function(snapshot) {
var PostObject = snapshot.val();
var keys = Object.keys(PostObject);
var currentRow;
for (var i = 0; i< keys.length; i++) {
var currentObject = PostObject[keys[i]];
if (i % 4 == 0) {
currentRow = document.createElement("div");
$(currentRow).addClass("row");
$("#contentHolder").append(currentRow);
}
var col = document.createElement("div");
$(col).addClass("col-lg-3");
var image = document.createElement("img");
image.src = currentObject.url;
$(image).addClass("contentImage image hover ");
var p = document.createElement("p");
$(p).html(currentObject.caption);
$(p).addClass("contentCaption");
$(col).append(image);
$(col).append(p);
$(currentRow).append(col);
//create new row on every third entry
//col-lg-4
}
// ...
});
}
Well, your question is not clear. However let me try to answer as per my understanding. If you want to display images in a popup, add a bootstrap modal to html, and on click of each image that you are displaying from firebase database,show the bootstrap modal as explained below:
Add this modal div to your HTML:
<div id="imageModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Caption goes here..</h3>
</div>
<div class="modal-body">
<div id="image"> </div>
</div>
</div>
</div>
Now in your timeline.js file, add below code:
$('img').on('click', function () {
$('#imageModal #image').empty();
var imgUrl = $(this).attr('src');
var caption = $(this).siblings('.contentCaption').html();
$('#imageModal #image').append('<img width="100%" height="100%" src="' + imgUrl + '"></img>');
$('#imageModal .modal-title').text(caption);
$('#imageModal').modal('show');
});
Note: There is a small error in your queryDatabase function:
var image = document.createElement("img");
image = document.createElement("div")
image.src = currentObject.url;
You are creating an image element and assigning the same variable to a div element. So, the image element is overwritten by div element. Delete the second statement image = document.createElement("div") for you to display the image element.
I'm teaching myself JavaScript and I'm trying to make a random background color appear when a button is clicked. Below you can find my code:
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center" onclick="randomColors">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
<script src="js/random-color.js"></script>
</body>
</html>
Here is my CSS Code:
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
And lastly, my JavaScript Code. This is where I'm having most of my trouble to be honest.
function randomcolor(){
document.getElementById('background').style.color =randomColors();
}
function randomColors(){
return '#' + Math.floor(Math.random() * 16777215).toString(16);
console.log("I'm working now")
}
Any help you can provide would be extremely helpful as this is all a learning experience for me. Thanks in advance!
It seems like its basically already been answered by others, but there is nothing wrong with repetition.
You are calling randomColors() instead of randomcolor().
You really shouldn't be using getElementById on the body tag. You can just use document.body to get the body.
You need to use style.background or style.backgroundColor to get the background color instead of text color.
You should be including your js scripts in <head> instead of near the bottom of your html document to ensure they are loaded before functions from them are called.
What happened is when your html loads, the onclick handler is undefined because your script hasn't been loaded as yet.. .hence you will get an an error in your console.log stating that your function is undefined. Move script tag above your onclick handler.
Snippet using .onclick
document.getElementById('button').onclick=randomcolor;
function randomcolor(){
document.getElementById('background').style.backgroundColor =randomColors();
}
function randomColors(){
var result='#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(result);
return result;
}
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
</html>
Snippet using addEventListener
document.getElementById('button').addEventListener('click',randomcolor,false)
function randomcolor(){
document.getElementById('background').style.backgroundColor =randomColors();
}
function randomColors(){
var result='#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(result);
return result;
}
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
</html>
First, you're using the wrong function in your callback. Use onclick='randomcolor()'. Make sure your JS functions are defined in the <head> of the document. Finally, document.getElementById('background').style.color is the text color, not the background color. Use document.getElementById('background').style.background = randomColors();