I have a function translation() which translates some parts of the contents.
I would like the reverse those translations when stopTranslation() is activated. I want to do it without simply reloading the page. I tried using return but the way I put it didn't work.
So, when you click on the first button, it activates function translation() and the text of <p> changes.
When the second button is clicked I want text that was changed by the first button to be changed back to normal. It should undo the first function.
<!DOCTYPE html>
<html>
<body>
<button onclick="translation()">ENG</button>
<button onclick="stopTranslation()">SRB</button>
<p id="a">Some text</p>
<script>
function translation() {
document.getElementById("a").innerHTML = "Hello World";
}
function stopTranslation() {}
</script>
</body>
</html>
You'll have to remember the text you're overwriting by reading innerHTML, then later put that text back by writing it back to innerHTML.
For instance, you might remember the old content as a data-* attribute on the element:
function translation() {
var element = document.getElementById("a");
element.setAttribute("data-text", a.innerHTML);
a.innerHTML = "Hello World";
}
function stopTranslation() {
var element = document.getElementById("a");
var text = element.getAttribute("data-text");
if (text) {
a.innerHTML = element.getAttribute("data-text");
element.removeAttribute("data-text");
}
}
Live Example:
function translation() {
var element = document.getElementById("a");
element.setAttribute("data-text", a.innerHTML);
a.innerHTML = "Hello World";
}
function stopTranslation() {
var element = document.getElementById("a");
var text = element.getAttribute("data-text");
if (text) {
a.innerHTML = element.getAttribute("data-text");
element.removeAttribute("data-text");
}
}
<button onclick="translation()">ENG</button>
<button onclick="stopTranslation()">SRB</button>
<p id="a">Some text</p>
Side note: I strongly recommend not using onxyz-attribute-style event handlers. Use modern event handling instead (addEventListener and such).
Related
The ultimate goal is to create self-contained web document that allows the user to get more information about something (like context or a definition for a concept) by clicking on the thing they want more information about, which then appends the appropriate text to the bottom of the div -- while also disabling the clicked link.
It's easier to show the effect I'm going for than explain it, so here's a JSFiddle with my super terrible solution:
https://jsfiddle.net/3qLbycu9/
Rather than this, I'd like to simplify the back-end to two things: a function that does the work, and an object that acts as a table to look up the values. Basically:
1) Use objects to store the text, as in:
var text = {
key1: "<p>This is some text.</p>",
key2: "<p>This is some other text.<p>",
key3: "<p>This is some more text than that.</p>"
};
2) Pass the key id on click to some function:
<p>Click <a onclick="function(key1)">and this link will give more text.</a></p>
3) That function uses key to get the correct string, appends the string to the div, and then disables the link.
I've spent too much time staring at this, and now can't tell whether I'm close to a solution, or very far from it!
Firstly, you can pass the event of the click on the a tag to a function, along with the key that you need. Then, you can add a class (or any other way you want) to disable the clicking (though I would consider this behaviour bit unintuitive to use).
Access the property with the given key name and then create a p element and append to a div.
const text = {
key1: "This is some text.",
key2: "This is some other text.",
key3: "This is some more text than that."
};
const appendDiv = document.getElementById("append")
function appendText(event, key) {
event.target.classList.toggle("disabled")
const newElementContent = text[key];
if (newElementContent) {
const newElement = document.createElement("p");
newElement.textContent = newElementContent;
appendDiv.append(newElement)
}
}
.disabled {
pointer-events: none;
}
<p>Click and this link will give more text.</p>
<p>Click and this link will give more text.</p>
<p>Click and this link will give more text.</p>
<div id="append"></div>
Passing the key to the string should be in the form of a string function('key1'). Then when trying to get access to the text in the function, use this instead text[key]
Example below
var text = {
key1 = 'hello';
key2 = 'hi';
}
function showText(key){
//getting value
var a = text[key];
}
Then you can pass showText to the onclick and display or do what you want with a
I am not sure if the other two answers answers your question. But this is the simplest solution I could come up with.
Javascript:
function init() {
var text = {
"704e04ea-9f44-4183-af59-8b89067a7245": "<p>This is some text.</p>",
"3a5306d9-17e7-4414-a192-cf27d885b658": "<p>This is some other text. <a href='#' id='704e04ea-7f44-4183-af59-8b89067a7245'>display nested text</a></p>",
"704e04ea-7f44-4183-af59-8b89067a7245": "<p>This is some more text than that.</p>"
};
var main = document.getElementById("main");
var links = main.querySelectorAll("a");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", handleClick);
}
function handleClick() {
var div = document.createElement("DIV");
div.innerHTML = text[this.id];
var links = div.querySelectorAll("a");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", handleClick);
}
document.body.appendChild(div.firstChild);
this.removeEventListener("click", handleClick);
}
}
window.onload = init;
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="main">
<p>Here's a test link over here. And here's another one over here</p>
</div>
</body>
</html>
Working plunker here: https://plnkr.co/edit/r427l77ZmkdlKozuPSat?p=preview
In this example you only need to maintain the text object and the ids on the anchor text used within that. You can also nest links within the paragraphs in this example, which I don't think the other solutions provided.
I have this HTML:
<div id = "options"></div>
I access to this div trough this Javascript:
var test = "hola";
document.getElementById('options').innerHTML=
<p>Test</p> <li>${test}</li>
And I have this button:
function click({
document.getElementById("Click").addEventListener("click", function(){
});
};
click();
I need that when that function called "click" is executed automatically that <li> can clean that value of the variable: "test" and it is seen empty.
How can I do it? Thank you
el.innerHTML is the property which keeps track of HTML text values shown inside the element. You can set that to empty whenever you want to clear it.
Try this sample - https://jsitor.com/J0gXikZmV
<div id = "options"></div>
var test = "hola";
let el = document.getElementById("options");
el.innerHTML = "<p>Test</p> <li>${test}</li>";
el.addEventListener('click', () => {
el.innerHTML = '';
})
Here it clear the html content of div
Here's the code...
https://jsfiddle.net/6n2k65zs/
Try add a new item, you'll see its not working for some reason but it should be...
I can't spot any errors in the code, can someone help me out please?
And does anyone know any good debuggers? debugging JS is a nightmare!
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript To-Do List</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<input id="input" type="text">
<button id="btn">Add</button>
<hr>
<ul id="todo">
</ul>
<ul id="done">
</ul>
<!-- javascript anonymous self-invoking function -->
<!-- Function expressions will execute automatically -->
<script>
// from outside the action you wont be able to access the variables
// prevents another variable with a same name from conflicting
(function(){
var input = document.getElementById('input');
var btn = document.getElementById('btn');
// Object for the lists
// the reason im using ID is because ID can only be named once rather than a class which can be named 100's of times
var lists = {
todo:document.getElementById('todo'),
done:document.getElementById('done')
};
/* Parameter is string
create a list element which is stored in 'el' and returns it
*/
var makeTaskHtml = function(str, onCheck) {
var el = document.createElement('li');
var checkbox = document.createElement('input');
var label = document.createElement('span');
label.textContent = str;
checkbox.type = 'checkbox';
checkbox.addEventListener('click', onCheck);
// el.textContent = str;
// can use this method to move an element from one element to another
el.appendChild(checkbox);
el.appendChild(label);
// Text content is grabbing the text from the text box and storing it in variable el.
return el;
};
var addTask = function(task) {
lists.todo.appendChild(task);
};
var onCheck = function(event){
var task = event.target.parentElement; //targets the item clicked
var list = task.parentElement.id;
//lists.done.appendChild(task);
//swaps the 2 objects around
lists[list === 'done' ? 'todo' : 'done'].appendChild(task);
this.checked = false;
input.focus();
};
var onInput = function() {
var str = input.value.trim; // trim removes white space...
if (str.length > 0) {
addTask(makeTaskHtml(str, onCheck));
input.value = '';
input.focus();
}
};
btn.addEventListener('click', onInput);
input.addEventListener('keyup', function(event){
var code = event.keyCode;
console.log(code);
if (code === 13) {
onInput();
}
});
input.focus();
addTask(lists.todo, makeTaskHtml('Test done', onCheck));
}());
</script>
</body>
</html>
It appears to me you are not calling trim as a method, but accessing it as a variable?
Try add the () in trim:
var onInput = function() {
var str = input.value.trim(); // trim removes white space...
Your addTask function is being called with 3 parameters:
addTask(lists.todo, makeTaskHtml('Test done', onCheck));
but the function definition for addTask only takes one parameter:
var addTask = function(task)
so you need to just call addTask with just makeTaskHtml parameter, and not lists.todo which is already referenced inside the addTask function or onCheck
Or for debugging in Chrome, try Cmd-Alt–I in (Mac) or Ctrl-Alt-I (Windows).
First of all, you shouldn't put your scripts inline in JSFiddle – put them in the JS box to protect everyone's sanity! It's what it's made for...
There are other issues in the code, but the main issue seems to be in this line:
var str = input.value.trim;
Here, you're assigning str to the JS function trim. You want to assign it the the results of trim(), so try:
var str = input.value.trim();
You're still getting other errors in the console, but the basics seem to work.
I have got a small javascript function and a piece of html code where i have a button, and I want that whenever user hovers that button, a little box to appear.Everything seems to be working great,despite that my function executes only after I hover that button for the 2 time(after the page has just loaded and I try to use my function for the 1 time, later everything executes after a firs hover).So what can I do about it?
HTML code
<body>
<div id = "searchBox">
<p id = "paragraph"><input type = "text" name = "serachBar"/>
<input type = "button" value = "szukaj" name = "search"/>
</p>
<div id = "searchButton">Szukaj</div>
</div>
</body>
and javascript itself
<script type = "text/javascript">
function popUp(menu){
var searchBox = document.getElementById(menu).style;
var searcButton = document.getElementById('searchButton');
if(!searchBox || searchBox.display == "none"){
searchBox.display = "block";
}
else {
searchBox.display = "none";
}
};
</script>
Change your if statement like this:
function popUp(menu) {
var searchBox = document.getElementById(menu);
var searcButton = document.getElementById('searchButton');
if (searchBox) {
if(searchBox.style.display == ""){
searchBox.style.display = "block";
}
else {
searchBox.style.display = "";
}
}
};
The original value will be "" instead of "none".
I'm making the assumption that the CSS setting is to display:"none".
I also moved the searchBox condition. If it isn't found, you don't want to set properties at all.
<p> is a flow element and can't contain <input>s.
Besides, your function instructs to toggle hidden state, rather than show box on mouseover. Therefore, the box will hide on first hover, and reappear on the second one.
You probably want to define mouseover and mouseout event listeners.
When I create a new element and I start typing (with the contentEditable set to true), and then look at it's innerHTML, it always contains an extra <br> at the end. If I look at the innerHTML before typing, I am getting the correct value. Is this normal? My problem is that I'm counting the number of lines using the <br> tag, and I can't have it give me more than I need. Here is some test code (javascript):
var _this = this;
function keyup(event)
{
if (event.keyCode == 112)
{
alert(_this.code.innerHTML);
}
}
function create()
{
this.code = document.createElement("div")
this.code.innerHTML = "Hello world.<br>I like testing popcorn.<br>Testing again.";
this.code.contentEditable = "true";
this.code.onkeyup = keyup;
document.body.appendChild(this.code);
_this = this;
}
window.onload = function()
{
create();
}
The code is set up so when you press F1, it shows the contents of div. I am using the latest version of Firefox.
First off, that tag should be <br /> not <br>, secondly a div is a block element and while you shouldn't see a <br> tag, you will see a new line after the div is created.
If you output the innerHTML value of that div element after it is created, what is the output?