How to pass variables from sheetJS to my html page - javascript

I am very new to everything, including this community and web programming, so please dont mind if i ask a stupid question.
I am building a little website of my own, trying to get some data from an excel file using sheetJS, then show it in a website, but nothing is showing.
Thank you very much if anyone can help me with that
<!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 src="https://unpkg.com/xlsx/dist/xlsx.full.min.js">
const XLSX = require('xlsx');
const workbook = XLSX.readFile("new.xlsx");
const worksheet = workbook.Sheets["Sheet1"];
const mess = XLSX.utils.sheet_to_json(worksheet);
const actress_name = mess[0].name;
const v_code1 = mess[0].code1;
console.log(mess[0].code1);
console.log(actress_name);
document.getElementById("NAME").innerHTML = actress_name;
document.getElementById("Code1").innerHTML = v_code1;
</script>
</head>
<body>
<ul>
<li id="NAME"></li>
<li id="Code1"></li>
<li id="Code2"></li>
<li id="Code3"></li>
</ul>
</body>
</html>
I tried it in a separate js file in terminal and it works. I don't quite understand. I feel it is something with the sequence of the code.

Related

How to create a to do list with only javascript?

How can I create a to do list with just javascript? I have a html file with only 1 div and have to do this with just javascript?
example
This is my html file...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To do App</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
The rule is that I can't add more html tags
Please help!!!
Well, you have to add more tags.
You don't have to write those tags into your HTML file, you can create elements using JS.
Components that you can create in JS
Search Bar
Todo Item
Button
After writing these components you can plug and play your logic.

JQuery in Laravel imported but not working

I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!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">
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.

UI5 export model as JSON

I currently work on a UI5 project which loads data from a local .json and bind it to a model. I can now edit and add new values to the model.
Is it possible to export this modified model as .json through a file download dialog?
I'm new to UI5 and looked on serveral posts but only found export to CSV where columns and rows are set. But this does not fit my case. I need it just converted back to .json.
Hopes anyone has an idea.
UI5 does not have a Control for this, but you can use sap.ui.core.HTML and trust the functionality of < a >-Tag
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Just a Button</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.core"
data-sap-ui-theme="sap_belize"></script>
<!-- only load the main library "sap.m" and the Belize theme -->
<script>
var json = {"My":"Json","is":"cool"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json));
var btn = new sap.ui.core.HTML({
content:"<a href='data:"+data+"' download ='data.json'>Download Json</a>"
});
btn.placeAt('content');
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>

Starting with knockoutjs

I'm trying to start a webpage with knockou.js
I'm trying to follow the instruction on the web and create very simple page, but for some reason i don't get the binding... maybe i miss a definiation or something like that? can anybody help with that?
That my page:
<html class="rtl">
<head>
<title>changeup - קבל שער</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<script type='text/javascript' src='bower_components/knockout.js/knockout.js'></script>
</head>
<body cz-shortcut-listen="true">
Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript">
var viewModel = {
myMessage: ko.observable() // Initially blank
};
viewModel.myMessage("Hello, world!"); // Text appears
</script>
</body>
</html>
but the only think i get on my browser is: "Today's message is:"
Read through the documentation under the subject Activating Knockout, you have to apply the bindings as well, add:
ko.applyBindings(viewModel);
after viewModel.myMessage("Hello, world!");

Removing the href attribute

I'm trying to write a code for pagination. One function is to disable the current link so it looks like text and to be unclickable. In html page this could be achieved by omitting the href attribute like :
<a>Link</a>
I couldn't do that in javaScript,
AvdonPagination.prototype.manageLinks = function(link){
if(link){
this.current.href = '#';
this.current = link;
}else{
this.current = this.links[0];
}
this.current.href = null;
}
because
this.current.href = null;
produces
Link
Also I tried this.current.href="", and this.current.disabled=true, but neither of them works.
How I can achieve <a>Link</a>?
try this removeAttribute("href")
Try the attached code snippet.
It uses javascript and currently removes the link function to the third link.
You can easily adapt it by adding more lines in javascript to reflect the lines you want to remove the link (but keep text).
<!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>
<a id="test-1" href="test-1">test-1</a>
<a id="test-2" href="test-2">test-2</a>
<a id="test-3" href="test-3">test-3</a>
<script>
document.getElementById("test-1").removeAttribute("href");
</script>
</body>
</html>

Categories

Resources