CK Editor doesn't send data to Firebase Database Empty - javascript

have created a Web Form to upload data(Rich Text) to Firebase Database,
But sometimes data is entered to Database and other Times the Fields in the Database is completely Empty. Can Anyone suggest me the solution as I am new to Web Dev.
Here is my WebForm Code (Rich Text is only in Description):
<script>
CKEDITOR.replace( 'quote' );
// Initialize Firebase
var database = firebase.database();
var quote;
function getdata(){
quote = document.getElementById('quote').value;
}
document.getElementById('submit').onclick = function(){
getdata();
firebase.database().ref("quoteday/quotes").set({
Data: quote,
})
}
document.getElementById('delete').onclick = function(){
firebase.database().ref("quoteday/").remove();
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!----======== CSS ======== -->
<link rel="stylesheet" href="style.css">
<script src="//cdn.ckeditor.com/4.17.2/full/ckeditor.js"></script>
</head>
<body>
<div class="form-group">
<label for="title">Quote day</label>
<textarea class="form-control" id="quote" name="quote" rows="3"
data-form-field="Message" placeholder="" autofocus=""
style="display: none;"></textarea>
</div>
<div><button id="submit">Submit/Update</button></div>
<div><button id="delete">Delete</button></div>
</body>
</html>
enter image description here

Because your textarea is empty, you have to type CKEDITOR.instances.quote.updateElement(); before get element value
Updates the element that was replaced by the editor with the > current data available in the editor.
Note: This method will only affect those editor instances created with the CKEDITOR.ELEMENT_MODE_REPLACE element mode or inline instances bound to
elements.
function getdata(){
CKEDITOR.instances.quote.updateElement();
quote = document.getElementById('quote').value;
}
If it still doesn't work, you can test this block as below
firebase.database().ref("quoteday/quotes").set({
Data: 'Test Data',
})
and then check your database, if Test Data saved or not ?

Related

How do I make my copy to clipboard buttons work in a fetched JSON table?

first post and code newbie here. Be kind :-)
So I've got this fetched and into JSON converted data from an example API where certain colors with their HEX codes are displayed. I tried to include buttons after every HEX code, so that whenever u like a color, you can easily copy the HEX via button click. However i can not make the functionality of the buttons work. Any tips, hints, whatsoever?
Appreciated!
fetch("https://api.sampleapis.com/csscolornames/colors")
.then(response => response.json())
.then(json => {
let li = `<tr><th>Name</th><th>Hex</th></tr>`;
let copyButton = `<button onclick="goCopy"><i class="fa-regular fa-copy"></i></button>`
json.forEach(color => {
li += `<tr>
<td>${color.name}</td>
<td class="test">${color.hex} ${copyButton}</td>
</tr>`;
});
function goCopy() {
// Get the text field
var copyText = document.getElementsByClassName("test");
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
// Alert the copied text
alert("Copied the text: " + copyText.value);
}
document.addEventListener("click", () => {
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>c</title>
<link rel="shortcut icon" href="./IMG/favicon-96x96.ico" type="image/x-icon">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<div class="container">
<h1 class="header">c</h1>
<!-- Suchleiste -->
<form action="" class="searchbar">
<input type="text" name="" id="searchInput" onkeyup="tableSearch()" placeholder=" Suchen" style="font-family:Arial, FontAwesome" />
</form>
<!-- Tabelle für Daten-->
<table id="colorTable"></table>
</div>
<script src="./index.js"></script>
</body>
I tried giving the second row of a class, but I am not really sure how to make each button work it's own HEX code.

nodemailer showing error in browser but not in editor

my question is that i know that chrome browser cant execute common js modules but in the node js file it is importing everything as common js and chrome is showing error and if i use ecmascript(e26)module to import nodemailer then it says cant import a module outsde a statement so their are two errors how to solve them or my technique is wrong to insert the nodemailer plz help me with it and thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanks in advance
here is my code
import * as nodemailer from "nodemailer"
var a=Math.round(Math.random()*999999);
c=document.getElementById("p");
var b=c;
function otpch(){
if(document.getElementById("optcheck").value===a){
document.open();
document.write("You are successfully Logged In")
}
}
function otpm(){
alert(4236)
var mailOptions = {
from: 'mygmailid#gmail.com',
to: b,
subject: 'Your Otp',
text: 'Your onetime otp is'+a
};
alert(4236)
var transport = nodemailer.createTransport({
service: 'gmail.com',
auth: {
user:'friendsgmailid#gmail.com',
pass:'itssecret'
}
});
alert("hi123");
transport.sendMail(mailOptions,function(err,info){
if(err) {
document.getElementById("demo").innerHTML="Error while sending otp please check your gmail id which you filled is correct or not ";
} if(info){
document.getElementById("demo").innerHTML="Otp Sent Successfully";
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="nodemailer/lib/nodemailer.js"></script>
<script src="sketch.js"></script>
</head>
<body >
<h3>Welcome to our site jain services</h3>
<h5>Write Your Gmail Address</h5>
<p id="p"><input id="gmailcheck"type="email" placeholder="Write Your Gmail" required></p>
<h4>click on the button to sign in</h4>
<button onclick="otpm()" type="submit"id="un" style="border: 3px solid black; border-radius: 50px;">Submit</button>
<h3 id="demo" style="color: red;">.</h3>
<input id="otpcheck" onclick="otpch()" type="number">
</body>
</html>

How do I update the input value using an onchange event and get the value in vanilla Javascript?

I am doing an assignment where I make a simple API call using fetch to retrieve an image a of dog by breed. The one issue I can't resolve is that the input value never changes when I try to retrieve an image of a different breed. the default value, which is 'hound', reappears after I press submit. I know I need to attach an onchange event to my input but I am not sure how to write it or how to get the value after the onchange event is triggered. Any help would be greatly appreciated. I originally wrote this with jQuery but decided to rewrite it in vanilla Javascript so that's why there is no jQuery.
I put a '<---' on the line I am struggling with.
P.S I know my code isn't very good, I am new to this.
Javascript
function getJson(breed) {
fetch("https://dog.ceo/api/breed/" + breed + "/images/random")
.then((response) => response.json())
.then((responseJson) => displayResults(responseJson));
}
function displayResults(responseJson) {
const dogImage = responseJson.message;
let breedImage = "";
let container = document.createElement("div");
console.log(dogImage);
breedImage += `<img src="${dogImage}">`;
container.innerHTML = breedImage;
document.querySelector(".results-img").innerHTML = "";
document.querySelector(".results-img").appendChild(container);
}
function submitButton() {
let breedName = document.querySelector("#numberValue").value;
breedName.addEventListener().onchange.value; <---
document.getElementById("dog-input").addEventListener("submit", (e) => {
e.preventDefault();
getJson(breedName);
});
}
submitButton();
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dog Api</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<form>
<input id="numberValue" type="text" value="hound" />
<button type="submit" class="submit-button">Submit</button>
</form>
<section class="results">
<h2>Look at these Dogs!</h2>
<div class="results-img"></div>
</section>
</div>
<script src="main.js"></script>
</body>
</html>
You don't need an onchange event handler. Currently you're storing the value of the input in breedName when you call submitButton. That means that breedName will never change because it is merely a reference to the value at that moment.
Instead create a reference to the element and read the value property in the submit event handler. That will get the value how it is at the time you submit.
function getJson(breedName) {
console.log(breedName);
}
function submitButton() {
const form = document.querySelector('#dog-form');
const input = document.querySelector('#numberValue');
form.addEventListener('submit', event => {
event.preventDefault();
const breedName = input.value;
getJson(breedName);
});
}
submitButton()
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dog Api</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<form id="dog-form">
<input id="numberValue" type="text" value="hound" />
<button type="submit" class="submit-button">Submit</button>
</form>
<section class="results">
<h2>Look at these Dogs!</h2>
<div class="results-img"></div>
</section>
</div>
<script src="main.js"></script>
</body>
</html>

After a button is clicked/form submit, the CSS stylesheet doesn't appear

After the use button is clicked, the sources when I inspect the page show that the style.css page goes away, and no styles are applied. I can't figure out why this is happening.
My index.html page looks like this:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500&family=Roboto:wght#100;300;400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" placeholder="First name" class="fname">
<input type="submit" value="Use" class="submit">
<script src="app.js"></script>
</body>
</html>
And my app.js is this:
const useBtn = document.querySelector('.submit');
const reloadBtn = document.querySelector('.btn__reload')
document.body.style.fontFamily = "Roboto;"
useBtn.addEventListener('click', function(){
let person = document.querySelector('.fname').value;
document.write(`<h2>It's ${person}'s turn!</h2>`)
document.write(`<h4>How long will they live?</h4>`)
let oldAge = `<p>${Math.floor((Math.random() * 10)+ 30)}</p>`
document.write(oldAge)
document.write(`<h4>What will be their yearly salary?</h4>`)
let salary = `<p>${Math.floor(Math.random() * 10000)}</p>`
document.write(salary)
document.write(`<h4>What will be their career</h4>`)
const jobs = [ 'plumber', 'doctor', 'witch', 'president', 'trump supporter']
let job = Math.floor(Math.random() * jobs.length)
document.write(jobs[job])
redoBtn();
})
function redoBtn(){
let tryAgain = document.createElement('button')
document.body.appendChild(tryAgain)
let buttonText = document.createTextNode('Try Again')
tryAgain.appendChild(buttonText)
tryAgain.addEventListener('click', function(){
window.location.href = window.location.href;
})
}
Any help is so appreciated!
Your document.write is overwriting all your html, including your linked stylesheet.
From https://developer.mozilla.org/en-US/docs/Web/API/Document/write:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.
If you really want to use document.write, you'll need to rewrite your stylesheet link into the new document. But it might be better to just replace the html of some container element on your page, like the body element.
Instead of using document.write which overwrites your html you could try this approach:
<input type="submit" value="Use" class="submit">
<!-- add new div to show the result -->
<div id="result"></div>
<script src="app.js"></script>
And in the click event:
useBtn.addEventListener('click', function(){
let person = document.querySelector('.fname').value;
let res = document.getElementById('result');
res.innerHTML = "<h2>It's "+person+"'s turn!</h2>";
// add further information to innerHTML here
// hide input fname and submit button
redoBtn();
})

Use input value passed in from previous page to filter through a list on page load

Ok, this might be quite hard for me to explain, but I will give it a go. I have two HTML pages: form.html & display.html. The form page has an input which obtains a value and then puts it into local storage once the form is submitted. After the form submission, the user will be taken to the display page, which will then retrieve the input value from the previous page from local storage and then displays the value inside the input field on the display page. The display page will later act as a job page which will display a list of jobs which is filterable by the value inside the input field on the same page. I can get the filter function to work by using onkeyup on the input field, but I what I can't make work is the filter function with the input value from the previous page by using something like onload. The reason why I am using two pages is that I will later use this code on a website which will have a search box on the landing page, and then will be directed to the Jobs page with filtered results. I am sorry if this was really hard to understand, I will post the code below so you might better understand.
Many thanks to anyone who takes time out of their day to help me with this problem, it is much appreciated.
form.html
<!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>Document</title>
<script>
function passValues() {
var firstName = document.getElementById("txt").value;
localStorage.setItem("textValue", firstName);
return false;
}
</script>
</head>
<body>
<form action="display.html">
<input type="text" id="txt" />
<input type="submit" value="Click" onclick="passValues();" />
</form>
</body>
</html>
display.html
<!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>Document</title>
</head>
<body>
<h1>Tokyo Expat Job Search</h1>
<input onload="filter()" onkeyup="filter()" id="result" type="text">
<ul id="Menu">
<li>English Techer</li>
<li>Waiter/Waitress</li>
<li>Developer</li>
<li>Banker</li>
<li>Designer</li>
<li>Logistics</li>
</ul>
<script>
function filter() {
var filterValue, input, ul, li, a, i;
input = document.getElementById("result");
filterValue = input.value.toUpperCase();
ul = document.getElementById("Menu");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
document.getElementById("result").value = localStorage.getItem("textValue");
</script>
</body>
</html>
Try to add the listener to window.onload? The input does not have such an event.
window.addEventListener('load', filter, false)

Categories