<button type="button" onclick="myFunction()">日本語</button>
<script>
function myFunction() {
document.getElementsByClassName("childdiv")[0].childNodes[1].textContent="私について.link("Aboutme.html") | ギャラリー.link("Gallery.html") | 連絡.link("contact.html")";
}
</script>
<div class="childdiv">
<h3 id="english"> About me | Gallery | Contact</h3>
This is the code i currently use. Normal text works perfectly, but when using hyperlinks within .textContent the button doesn't even work. Does anyone know a solution?
EDIT: new code below to update text and buttons to Japanese onclick.
//we are targeting the current links by id
var a = document.getElementById('link1');
var b = document.getElementById('link2');
var c = document.getElementById('link3');
//this is for example text
var p = document.getElementById('example');
//this function will take English links/text and update to Japanese when button is clicked
function myFunction() {
p.innerHTML = "Links and text are now Japanese"
if (a) {
a.innerHTML = "私について";
a.href = "私について.link";
}
if (b) {
b.innerHTML = "私について";
b.href = "私について.link";
}
if (c) {
c.innerHTML = "連絡";
c.href = "連絡.link";
}
}
<button id="japanese" type="button" onclick="myFunction();">日本語</button>
<div id="childdiv">
<h3 id="english"> <a id="link1" href="Aboutme.html">About me</a> | <a id="link2" href="Gallery.html">Gallery</a> | <a id="link3" href="contact.html">Contact</a></h3>
</div>
<p id="example">Click Button to update links and text to Japanese</p>
Related
I am creating a todo app. I create add button which is working perfectly fine. But, the trash button it keeps on returning null value.
I can not find solution on the google i didnt find the solution.
Can Anybody Help me here
var todoList = document.getElementById("todolist");
var addBtn = document.getElementById("add-btn");
var taskName = document.getElementById("task-name");
var trashBtn = document.getElementById("trash");
addBtn.addEventListener("click", addFunction);
function addFunction() {
var task = document.createElement("div");
task.classList.add("task");
var tname = document.createElement("li");
tname.setAttribute("id", "li-task");
var trash = document.createElement("BUTTON");
trash.setAttribute("id", "trash");
trash.innerHTML = '<i class="fas fa-trash"></i>';
tname.appendChild(trash);
task.appendChild(tname);
todoList.appendChild(task);
}
console.log(trashBtn);
console.log(addBtn);
<div class="main">
<header>
<h1>Doer's List</h1>
</header>
<div class="add-task">
<form>
<input type="text" id="task-name">
<button id="add-btn" type="button"><i class="fas fa-plus-circle"></i></button>
</form>
</div>
<div class="to-do-list">
<ul id="todolist"></ul>
</div>
</div>
Help Here
You need to get the Trash Button by id AFTER you've added it to the page.
I instead of creating new variable trashBtn, I used the variable which is define when creating Elemnt.
Below is my function to create and remove text boxes dynamically, however I am looking for a method by which I can group these items into one text box (preferably through the use of a button located below the text boxes or something..). The jist is that I've four columns, each with these functions to add and remove the text boxes, therefore I also wondered if that after grouping the text boxes would the undo function now be useless? Apologies for my lack of knowledge in this area, and thank you in advance for your help
function addText(e) {
let week = e.target.closest('.week'),
area = week ? week.querySelector('textarea') : null,
text = area ? area.value : '';
if (text.length) {
let item = document.createElement('p');
item.innerText = text;
week.appendChild(item);
area.value = '';
}
}
function removeText(e) {
let week = e.target.closest('.week'),
item = week ? week.querySelector('p:last-of-type') : null;
if (item)
item.remove()
}
document.body.addEventListener('click', event => {
if (event.target.closest('[add-text]'))
addText(event);
if (event.target.closest('[remove-text]'))
removeText(event);
})
<div id="planner">
<div class="week week1">
<div class="add">
<h1>Weeks</h1>
<textarea></textarea>
<button type="button" add-text>Add text</button>
<button type="button" remove-text>Undo</button>
</div>
</div>
<div class="week week2">
<div class="add">
<h1>Topics</h1>
<textarea></textarea>
<button type="button" add-text>Add text</button>
<button type="button" remove-text>Undo</button>
</div>
</div>
I have a div with multiple a elements.
<div class="vertical-menu">
<a href="#" data-actiontime="0" class="listItemActive">
<strong class="time">00:00</strong> || <strong class="action">Action x</strong>
</a>
<a href="#" data-actiontime="36" >
<strong class="time">00:36</strong> || <strong class="action">Action y</strong>
</a>
</div>
Each a calls the function myClickHandler when clicked.
For example when clicked in 1'st a:
function myClickHandler(evt)
{
evt.preventDefault();
var elemReceived, attrValue, aElem;
elemReceived = evt.currentTarget;
console.log(elemReceived); //it outputs the "a" with the childs elements "strong" ... ok
aElem = $(elemReceived).find('a'); //get only the "a" element
console.log(aElem); //it outputs "w.fn.init [prevObject: w.fn.init(1)]length: 0prevObject: w.fn.init [a.listItemActive]__proto__: Object(0)
attrValue = $(aElem).attr("data-actiontime"); //alse tried with: aElem.getAttribute("data-actiontime"); but still not working
console.log(attrValue); //it outputs "undefined"!!!!
globalVarY = attrValue ;
aElem.setAttribute("class", "listItemActive");
}
How can this be solved?
Edit 1:
function setListItemClickBehaviour()
{
var aElements;
aElements = document.querySelectorAll(".vertical-menu a");
aElements.forEach(function (aElements)
{
aElements.addEventListener("click", myClickHandler);
});
}//setListItemClickBehaviour
You can read the attribute like I'm showing you in the code snippet below:
function myClickHandler(evt) {
console.log(this.getAttribute('data-actiontime'));
}
function setListItemClickBehaviour() {
var aElements = document.querySelectorAll(".vertical-menu a");
aElements.forEach(function(aElements) {
aElements.addEventListener("click", myClickHandler);
});
}
setListItemClickBehaviour();
<div class="vertical-menu">
<a href="#" data-actiontime="0" class="listItemActive">
<strong class="time">00:00</strong> || <strong class="action">Action x</strong>
</a>
<br />
<a href="#" data-actiontime="36">
<strong class="time">00:36</strong> || <strong class="action">Action y</strong>
</a>
</div>
In my use case I have question title and question text labels. When I press edit button I want replace the labels with Text boxes with question title and question text. Also submit and cancel buttons for edit. In this edit if I press cancel I should replace with original div content. The following code is working until cancel. When I press cancel it is not properly replacing the original content. Also the edit button got disabled. I didn't disable edit button anywhere manually.
JQuery code:
//global variable for question edits
var originalQuestion = "";
//Enables and disables the question elements
//for all questions
$('.questiondiv').on('click', '.edit_question_button', function() {
console.log("In submit edit question text area");
var pageURL = $('#page_url').text();
var loggedUser = $('#logged_user').text();
if (!loggedUser) {
console.log("In answerbutton redirect");
window.location.href = "/login/?redirect="+pageURL;
} else {
console.log("question edit");
title_val = $(this).closest('.question-inner').find('.quest_title_val').text();
question_val = $(this).closest('.question-inner').find('.quest_text_val').text();
console.log("question edit logged in 2");
console.log("Question title value ", title_val);
console.log("Question value ", question_val);
newdiv = "<div class='form-input updated_question'><input name='question_title_val' class='question_title_val' type='text' size='81' value='"+title_val+"' /></div> <br /> <div class='form-input'><textarea name='question_text_val' class='question_text_val' rows='8' cols='80'>"+question_val+"</textarea><br /><div class='form-input'><a type='Submit' id='updatequestion' name='updatequestion' class='btn btn-primary updatequestion'>Update Question</a><a type='Cancel' id='cancelupdatequestion' name='cancelupdatequestion' class='btn btn-primary cancelupdatequestion'>Cancel</a></div></div>";
originalQuestion = $(this).closest('.questiondiv').html()
$(this).closest('.question-inner').replaceWith(newdiv);
}
});
//updates question
//question ID may have to added as
//hidden element in the html
$('.questiondiv').on('click', '.updatequestion', function() {
console.log("In update question button");
var question_id = $(this).closest('li').find('.question_id_val').val();
var quest_title = $(this).closest('.updated_question').find('.quest_title_val').text();
var quest_val = $(this).closest('.updated_question').find('.quest_text_val').text();
console.log(quest_title);
console.log(quest_val);
$.getJSON("/question?question_id="+question_id+"&question_title"+quest_title+"&question_val="+quest_val, function(data) {
console.log("update question Response "+data);
$(this).closest('.updated_question').replaceWith(originalQuestion);
});
//$(this).closest('.answersectiondiv').remove();
});
//cancel updatequestion elements
$('.questiondiv').on('click', '.cancelupdatequestion', function() {
console.log("In cancel update question area");
//console.log("Original question div tag ", originalQuestion)
$(this).closest('.question-inner').replaceWith(originalQuestion); //Again use this to remove only parent container div
//$(this).closest('.questiondiv').find('.edit_question_button').prop( 'disabled' , true );
});
HTML code:
<div class="qanda questiondiv" id="questionarea" name="questionarea">
<div class="question-inner">
<div>
<div id="topic" class="upvote pull-left">
<a class="upvote"></a>
<span class="count">3</span>
<a class="downvote"></a>
</div>
<div >
<div class="qanda-info">
<h6><p class="quest_title_val">{{.QuestionTitle}}</p></h6>
</div>
<p class="quest_text_val">{{.QuestionText}}</p>
</div>
</div >
<div class="qanda-info">
<div class="user-info">
<a href="/userprofile/{{.UserId}}" ><img src="http://tinygraphs.com/spaceinvaders/Dany?theme=frogideas&numcolors=4&size=220&fmt=svg"/>
</a>
</div>
<h6>{{.UserId}}</h6>
<span class="date alt-font sub">{{.DateCreated}}</span>
[<a class="edit_question edit_question_button" >edit</a>|<a class="delete_question_button" id="deleted" ">delete</a>]<br>
<a id="answertext" name ="answertext" type="submit" class="link-text answerbutton">Answer</a>
</div>
</div>
</div>
Could someone help me with this? Thanks
I tried to get element's values in div with button click and bring div's values into input box.
and I tried this:
window.onload = function () {
$('.DA').on('click', '.submit_btn', function () {
var getinfo = $(this).val();
$('#val_input').val(getinfo);
});
};
this is my example.html
<input id="val_input">
<li class = 'CA'>
<div class = 'DA'>
<h1 id = 'HA'>name1</h1>
<span class = 'SA'>info1-1</span>
<span class = 'SB'>info1-2</span>
<span class = 'SC'>info1-3</span>
<button type = "submit" class = "submit_btn">submit</button>
</div>
<li>
<li class = 'CA'>
<div class = 'DA'>
<h1 id = 'HA'>name2</h1>
<span class = 'SA'>info2-1</span>
<span class = 'SB'>info2-2</span>
<span class = 'SC'>info2-3</span>
<button type = "submit" class = "submit_btn">submit</button>
</div>
<li>
...
I'm also tried to put one value in input box like this:
window.onload = function () {
$('.DA').on('click', '.submit_btn', function () {
var getinfo = $(".SA").val();
$('#val_input').val(getinfo);
});
};
but it dosen't work.
I 'm very new to JS and Jquery so can't get a clue how to solve & where am I missing...
Try this
check this link
<input id="val_input">
<li class= 'CA'>
<div class= 'DA'>
<h1 id = 'HA'>name2</h1>
<span class= 'SA'>info2-1</span>
<span class= 'SB'>info2-2</span>
<span class= 'SC'>info2-3</span>
<button type= "button" class="subimit">submit</button>
</div>
<li>
$(document).ready(function(){
$('.subimit').click(function(){
var getinfo = $(this).prevAll(".SA").text();
$('#val_input').val(getinfo);
});
});
You need to use .text() instead of .val(). you will also need current clicked element context to target sibling span text:
$('.DA').on('click', '.submit_btn', function () {
var getinfo = $(this).prevAll(".SA").text();
$('#val_input').val(getinfo);
});
$(document).on('click', '.subimit_btn', function() {
var getinfo = $(this).text();
$('#val_input').attr('value', getinfo);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="val_input">
<li class = 'CA'>
<div class = 'DA'>
<h1 id = 'HA'>name1</h1>
<span class = 'SA'>info1-1</span>
<span class = 'SB'>info1-2</span>
<span class = 'SC'>info1-3</span>
<button type = "submit" class = "subimit_btn">submit</button>
</div>
<li>
<li class = 'CA'>
<div class = 'DA'>
<h1 id = 'HA'>name2</h1>
<span class = 'SA'>info2-1</span>
<span class = 'SB'>info2-2</span>
<span class = 'SC'>info2-3</span>
<button type = "submit" class = "subimit">submit</button>
</div>
<li>