I tried to export variables to another module, but error occured.
Uncaught SyntaxError: Unexpected token 'export'.
File structure:
./css:
select.css style.css
./html:
index.html make.html select.html
./javascript:
make.js script.js select.js
index.html:
<!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>Word Search Maker</title>
</head>
<body>
<div class="title-h1">
<h1>
Simple Word Search maker
</h1>
</div>
<div class="start">
<button id="start-button">Start ➝</button>
</div>
<script src="/javascript/script.js"></script>
<link rel="stylesheet" href="/css/style.css">
</body>
</html>
script.js
const startButton = document.querySelector("#start-button");
const activeclass = "active";
function handlestartBtnMouseEnter() {
startButton.classList.add(activeclass);
}
function handlestartBtnMouseLeave() {
startButton.classList.remove(activeclass);
}
function handleStartBtnClick() {
window.location.href = "/html/select.html";
}
startButton.addEventListener("mouseenter", handlestartBtnMouseEnter);
startButton.addEventListener("mouseleave", handlestartBtnMouseLeave);
startButton.addEventListener("click", handleStartBtnClick);
select.html:
<!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>Making Basic template</title>
</head>
<body>
<h1>
Basic template:
</h1>
<div class="settings">
width: <input type="text" id="width">
<br>
height: <input type="text" id="height">
</div>
<button id= "make-button">Make</button>
<script type="module" src="/javascript/select.js"></script>
</body>
</html>
select.js:
let width_textbox = document.getElementById("width");
let height_textbox = document.getElementById("height");
let width = null;
let height = null;
const makebutton = document.querySelector("#make-button");
function handleClickMakeBtn() {
width = parseInt(width_textbox.value);
height = parseInt(height_textbox.value);
if (width > 30 || height > 30) {
alert("Width and height cannot longer than 30!");
width_textbox.value = "";
height_textbox.value = "";
} else if (width < 5 || height < 5) {
alert("Width and height cannot shorter than 5!");
width_textbox.value = "";
height_textbox.value = "";
} else if (isNaN(width) || isNaN(height)) {
alert("Width and height must be number!");
width_textbox.value = "";
height_textbox.value = "";
} else if (width == null || height == null) {
alert("You have to enter width and height!");
}
else {
window.location.href = "/html/make.html";
}
export { width, height }
}
makebutton.addEventListener("click", handleClickMakeBtn);
make.html:
<!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>Make word search</title>
</head>
<body>
<script type="module" src="/javascript/make.js"></script>
</body>
</html>
make.js:
import * as settings from "./select.js";
for (i=0; i <= width; i ++) {
document.createElement('input') * settings.width;
console.log(settings.height);
}
I'm very new to web. Sorry if it's just my mistake.
the issue come from function handleClickMakeBtn
you can't export object in function like that
if you want to return value you have to use the keyword return
but like width and height are global variable when you modify it in function it's modify the global variable
You can only export stuff only at the top-level of the file (ie not inside a function).
However you can use window object to access the variable from anywhere.
like this
function handleClickMakeBtn() {
width = parseInt(width_textbox.value);
height = parseInt(height_textbox.value);
window.settings = { width, height }
}
now you can access the object from anywhere.
like window.settings. I don't recommend this way instead you can create a global object inside the module and export that at top level.
Related
I need to make section with options in it going from 0 to 100 when the page is open, in html is simple just type it all out :D, but i think i can do this in java script but i am not quite sure how.
Here is my html and a little bit of js code:
function options() {
var section = document.getElementById("section");
for(var i = 0;i < 100;i++){
section.innerHTML = "<option value="i">"+i+"</option>";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="section" onload="options">
</section>
</body>
</html>
Here's How you can do it -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="mySelect" onload="options()"></select>
</html>
<script type="text/javascript">
var selectElem = document.getElementById("mySelect");
for (var i = 0; i < 100; i++){
var element = document.createElement("option");
element.innerText = i + 1;
selectElem.append(element);
}
</script>
Here's the working example
<section> tag doesn't support onload.
You can check w3schools onload event and MDN: onload, the tags support onload are: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
So you can move onload="options()" to <body> then escape the double quotes and use <select> instead of <section> as the comments mentioned.
function options() {
var section = document.getElementById("section");
for(var i = 0;i < 100;i++){
section.innerHTML += "<option value=\"i\">"+i+"</option>";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="options()">
<select id="section">
</select>
</body>
</html>
So, I saw a video by Veritasium -> (https://youtu.be/094y1Z2wpJg)
And I wanted to try to translate it into code.
when I run it, nothing gets logged and no errors appear at all
it might be a very simple fix due to the fact that I am a VERY new programmer so yea.
if you could help that would be great! :)
var i = document.getElementById("solvebtn");
function solve() {
while(i > 1) {
//even
if(i % 2 == 0) {
(i / 2)
console.log(i)
}
//odd
else {
(i * 3 + 1)
console.log(i)
}
}
}
/* RULES */
//if odd i * 3 + 1
//if even i / 2
<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>3X + 1</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" placeholder="Number"></input>
<button id="solvebtn" onclick="solve()">Solve</button>
</body>
</html>
You where using the wrong value, the button doesnt contain the input value, you need to get that from the input field.
var i = document.getElementById("solvebtn");
function solve() {
let value = document.getElementById("val").value;
while (value > 1) {
//even
if (value % 2 == 0) {
value = value / 2
console.log(value)
}
//odd
else {
value = value * 3 + 1
console.log(value)
}
}
}
/* RULES */
//if odd i * 3 + 1
//if even i / 2
<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>3X + 1</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" id="val" placeholder="Number"></input>
<button id="solvebtn" onclick="solve()">Solve</button>
</body>
</html>
you should change the input type to number in your HTML code
you can get the input number using element.value
const element = document.getElementById("input");
function solve() {
//this is wat you shold add
let i = element.value;
console.log(i);
while(i > 1) {
//even
console.log("ddd")
if((i % 2) === 0) {
(i /= 2)
console.log(i)
}
//odd
else {
(i =i*3 + 1)
console.log(i)
}
}
}
<!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">
<link rel="shortcut icon" href="#">
<title>Document</title>
<script defer src="app.js"></script>
</head>
<body>
<!--change the type to number-->
<input id="input" type="number" placeholder="Number"></input>
<button id="solvebtn" onclick="solve()">Solve</button>
</body>
</body>
</html>
// I'm trying to create div elements using a FOR loop but the event is not fired, although I found a solution, I wanna know why the event isn't fired
// load event here is not fired
document.addEventListener('load', () => {
for (i = 0; i <= 32; i++) {
let gridSquare = document.createElement('div');
gridSquare.className = 'grid-square'
document.querySelector('.container').appendChild(gridSquare);
console.log(gridSquare,i)
}
});
// Random Text
<!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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<title>Javascript Test run</title>
</head>
<body>
<header>
<h1 class="h1">Etch-A-Sketch</h1>
</header>
<main>
<--! Therefore DOM elements aren't created inside this div !-->
<div class="container"></div>
</main>
</div>
<script src="/main.js"></script>
</body>
</html>
// Random Text
Try with window.onload
window.onload = () => {
for (i = 0; i <= 32; i++) {
let gridSquare = document.createElement('div');
gridSquare.className = 'grid-square'
document.querySelector('.container').appendChild(gridSquare);
console.log(gridSquare,i)
}
}
I have 3 identical page only a banner changes on the 3 pages in html, I'd like to put in a file js this part of code to have only one function call and that in my js every time I am on such a page he calls me the right banner.
<!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>
<img id="image0" src="page1" />
TEXTE
TEXTE
TEXTE
</body>
<script src ="index.js"></script>
</html>
and Js
const page1 = index.html;
const page2 = euratech.html;
const page3 = eurasanté.html;
function changeImage(element)
{
let changeUrl = element.getElementsByTagName("img").item(0);
let img = changeUrl.getAttribute("src");
if(img === page1)
{
img = "2BOA-305.jpg";
}
if(img === page2)
{
img = "574b5545444ea.jpg";
}
if(img === page3)
{
img = "e233b0f310e17d1d40f1d3d49cb7d5a1.jpg";
}
changeUrl.setAttribute("src", img);
}
I have nothing that throws me I'm afraid of having an error :/
What's the problem I've been having recently with the editor?
I have a span
<span>123456789<span>
I selected 456 regions for segmentation and I want to achieve this effect
<span>123</span>456<span>789</span>
what should I do?
1.Select with mouse
enter image description here
2.Click bold
enter image description here
3.Split effect
enter image description here
I think I found a way! ! !
window.onload = function(){
var oBtn = document.querySelector('#btn');
oBtn.onclick = function(){
var range = getRangeAt();
console.log(range.commonAncestorContainer.parentNode.nodeName);
document.execCommand('RemoveFormat');
range = getRangeAt();
console.log(range.commonAncestorContainer.parentNode.nodeName);
}
}
function getRangeAt(win) {
var _selection, //选取对象
_range //光标对象
;
win = win || window; //获取创建光标的域
//html5得到光标的处理
if (win.getSelection) {
_selection = win.getSelection(); //获取选取对象
//当获取选取中有光标的处理
if (_selection.rangeCount) {
_range = _selection.getRangeAt(0); //返回选区的处理
}
}
//ie系列的处理，ie系列不支持win.getSelection，有自己独特的属性
else {
_selection = win.document.selection; //获取选取对象
_range = _selection.createRange(); //光标对象
}
return _range; //光标的处理
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div contenteditable="true">
<span style="font-weight:bold">Selected part</span>
</div>
<button id="btn">split</button>
</body>
</html>