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>
Related
why doesn't it work? i just want to add a paragraph to a div. Guys, why doesn't it work? i just want to add a paragraph to a div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="pobieranko.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="klasa">lalal</div>
</body>
</html>
const divek = document.querySelector(".klasa")
const paragraf = document.createElement("p")
paragraf.textContent = "paragrafik"
divek.appendChild (paragraf);
It appears you did not add a script tag to the page as so:
<script>
const divek = document.querySelector(".klasa")
const paragraf = document.createElement("p")
paragraf.textContent = "paragrafik"
divek.appendChild (paragraf);
</script>
How i'm supposed to select my element that have been created by function. First function is working well, but while i'm trying to select the element that been created in that function, it doesn't work
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function () {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
body.appendChild(c);
});
document.querySelector("p").addEventListener("click", function () {
console.log("Hi");
});
<!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>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="lop">s</div>
<div class="body"></div>
<script src="script.js"></script>
</body>
</html>
That's because you are attempting to attach a click event to your paragraph tag before its ever been added to the DOM.
You will need to move this new event listener inside of your onclick and after you append it to your .body div.
Example:
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function () {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
body.appendChild(c);
document.querySelector("p").addEventListener("click", function () {
console.log("Hi");
});
});
As requested, here is how you could just split some of this out to be its own methods for clarity. Feel free to use your own style as its just an example:
const onClickLop = (e) => {
const el = document.createElement("p");
const bodyDiv = document.querySelector(".body");
el.appendChild(document.createTextNode("lopas"));
bodyDiv.appendChild(el);
el.addEventListener("click", onClickLopas);
};
const onClickLopas = (e) => {
console.log("Hi");
});
document.querySelector(".lop").addEventListener("click", onClickLop);
Problem:
You create the p element at the moment when you click on .lop
You try to add the event listener at the page load. At this point there is no p tag at all.
Solution:
Add the event listener after you created the p tag.
You could also use the reference c instead of querySelector.
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function() {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
body.appendChild(c);
c.addEventListener("click", function() {
console.log("Hi");
});
});
<!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>
</head>
<body>
<div class="lop">s</div>
<div class="body"></div>
</body>
</html>
The code to add the event listener for the p element is executing before your code that creates it. Move the event handler into the first function so that it isn't triggered until the element is created and added to the document. However, that will mean that each time you click the first element, a new p will be created with its own handler (separate question/answer).
Also, by doing that you can consolidate some code.
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function () {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
c.addEventListener("click", function () {
console.log("Hi");
});
body.appendChild(c);
});
<!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>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="lop">s</div>
<div class="body"></div>
<script src="script.js"></script>
</body>
</html>
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.
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 :/
I'm trying to change a picture in a webpage using the tag button and the onclick attribute that call a function that I did in a js document, but it isn't working, this is what a did:
in Javascript:
function store (a,z) {
var pic;
if (a>z) {
pic = "images_weddings/desing_logo-01.jpg";
}else{
pic = "images_weddings/rose1.jpg";
}
document.getElementById('change1').src = pic;
}
and in html:
MATRIMONIOS
<div>
<img src="images_weddings/desing_logo-01.png" id="change1" >
</div>
<button type="button" onclick="store(2,3)">change the image</button>
I change links to images and code works - strange in your code is that in html you have PNG file "desing_logo-01.png" but in js you have JPG file "desing_logo-01.jpg"
function store (a,z) {
var pic;
if (a>z) {
pic = "https://i.ytimg.com/vi/ktlQrO2Sifg/maxresdefault.jpg";
}else{
pic = "https://thechive.files.wordpress.com/2018/03/girls-whose-hotness-just-trumped-cute-89-photos-257.jpg?quality=85&strip=info&w=600";
}
document.getElementById('change1').src = pic;
}
<div>
<button type="button" onclick="store(2,3)">change the image</button>
<img src="https://i.ytimg.com/vi/ktlQrO2Sifg/maxresdefault.jpg" id="change1" >
</div>
Try this code in your lapy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title> </title>
</head>
<body>
<div>
<img src="images_weddings/desing_logo-01.png" id="change1" >
</div>
<button type="button" onclick="store(2,3)">change the image</button>
<script type="text/javascript">
function store (a,z) {
var pic;
if (a>z) {
pic = "images_weddings/desing_logo-01.png";
}else{
pic = "images_weddings/rose1.png";
}
document.getElementById('change1').src = pic;
}
</script>
</body>