I don't understand the concept of this function in Javascript [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
for example, you would have
<input id="searchbox" type="text" value="Type Here..." />
<button id="clickbait">Click Me</button>
<div id="emptydiv">sda</div>
<script type="text/javascript">
var clickthis="clickbait";
var searchinput=document.getElementById("searchbox").value;
var generate="emptydiv";
document.getElementById(clickthis).onclick=function () {
searchinput=document.getElementById("searchbox").value;
document.getElementById(generate).innerHTML=searchinput;
}
</script>
So this is pretty much just something to change the text in the empty div to whatever is in the text field when you click on the button but I don't understand the "idea" of what's going on here. I already set the var to a value so why do you need to grab the value again?
I can understand the other basics so far like document(refers to the whole page) then getelementbyid(refers to the element) and then on the click you want it to perform a function but everything after that is confusing.

I already set the var to a value so why do you need to grab the value
again?
When you set the searchinput value first before the onclick assignment, you fetched and assigned the value of searchinput at that time.
Inside the click event handler, you are getting the value in searchinput when the div is clicked so the value at that time might be different.

When its firing click event then searchinput=document.getElementById("searchbox").value;
that means searachinput is what everever typed in the input feild
and then that value is being reassigned to
document.getElementById(generate).innerHTML=searchinput;

`
When the button is clicked fire the event:
document.getElementById(clickthis).onclick=function ()
Get the value of 'searchBox':
searchinput=document.getElementById("searchbox").value;
Assign what ever was in the 'searchBox' as HTML in 'emptyDiv'
document.getElementById(generate).innerHTML=searchinput;
Just to note that:
searchinput=document.getElementById("searchbox").value;
Is actually redundant because you are already declaring it with the other vars.
So your code should look like this:
document.getElementById('clickbait').onclick=function () {
var searchinput = document.getElementById("searchbox").value;
document.getElementById('emptydiv).innerHTML=searchinput;
}
Or to make it even simpler and cut it down to 2 lines you could even use jQuery:
$('#clickbait').on('click', function(){
$('#emptydiv').innerHTML = $('#searchbox').value;
}

It copies the value of input into the "emptydiv" div when you click on the button.
Why is the real good question, here, IMO.

Related

jquery get value of specific number inputs in while loop [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last month.
Improve this question
what the result looks like
I'm making a product inventory system; where I can simple change the value with number inputs, hit the checkmark, and be done. But I'm having trouble getting the specific value.
php:
<?php
$get_prod = $con->query("SELECT * FROM products");
while($get = mysqli_fetch_array($get_prod)){
echo '
<div class="prod-inv">
<div class="prod-inv-top">
<h1>'.$get['prod_name'].'</h1>
<h2>'.$get['prod_price'].'</h2>
</div>
<div class="prod-inv-body">
<img class="image-manage" src="'.$get['prod_cover'].'">
<input id="'.$get['prod_id'].'" type="number" class="num" value="1"/>
<button id="'.$get['prod_name'].'" class="btn search">✓</button></a>
</div>
</div>';
}
?>
jquery:
<script type="text/javascript">
$("button").click(function() {
var target = this.id;
var value = $(target).val();;
alert(value);
});
</script>
I've tried everything from form GET, to href links, now jquery. So far nothing has yelded results.
[1] Firstly, I'm not familiar with PHP, but it seems that closing anchor tag mistakenly presents in the markup:
<button id="'.$get['prod_name'].'" class="btn search">✓</button></a>
Or maybe opening anchor tag is missing...
[2] Secondly, in following line:
var target = this.id;
context "this" is currently clicked button, this code takes clicked button id and then in this line:
$(target)
you're taking currently clicked button DOM element by it's id, but it is already stored in "this"
[3] when you want to query element by id, you have to prepend it with hash "#":
$('#' + target)
So, you see the issue, when button is clicked, you take it's id, then find this button on the page again by it's id and then try to take .val() from a button (which actually does not have a value, it is not an input)
Suppose, you wanted to achieve following:
button is clicked -> find input near this button -> take value of this input
$('button').click(function () {
var value = $(this).closest('.prod-inv-body').find('input').val();
console.log(value);
});

Change referral link [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have question. Is there any way for html or javascript?
I have adf.ly referral link(example): adf.ly/12345 + link.
To download my source download file1 i input link as: adf.ly/12345/https://example.com/downloadfile1
For file2 link i input adf.ly/12345/https://example.com/downloadfile2
.. and so on for many links.
But one day I need to change my referral link from adf.ly/12345 to adf.ly/6789
So i need to change above link one by one:
adf.ly/6789/https://example.com/downloadfile1
adf.ly/6789/https://example.com/downloadfile2
.. and so on.
My question, is there any way to auto change any link start from adf.ly/12345+url to adf.ly/6789+link, using html or JavaScript?
I try to search the topic, but I'm just beginner. I cant find any or maybe wrong search.
Suppose you are using two input tags, first to get input for the initial url and in the next input field insert the new url, when clicking the button, it will replace the existing url with the new one everywhere.
function replaceUrl () {
let initial = document.getElementById("initial").value;
let replace = document.getElementById("replace").value;
let url = ['shorte.st/abc123/https://example.com/downloadfile2', 'adf.ly/12345/https://example.com/downloadfile2']
url = url.map((u) => u.includes(initial) ? u.replace(initial, replace) : u)
console.log(url)
}
Enter first part <input type="text" id="initial"/>
Enter second part <input type="text" id="replace"/>
<input type="button" value="Change" onclick="replaceUrl()">

How get value of a textarea and check it whether it empty or not [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have created textarea using simpleMde but now I couldn't get the value and check it whether it is empty or not
var message = document.getElementById("simpleMde").value;
console.log(message);
<textarea class="form-control" id="simpleMde" name="message"></textarea>
It shows an empty string only.
In this, it will check every time you press the button if the textarea is empty or not
You can do this:
const message = document.getElementById("simpleMde");
const btn = document.getElementById("btn");
function onClick() {
if (message.value !== "") {
console.log(message.value);
} else {
console.log("Message can not be empty! 😶");
}
}
btn.addEventListener("click", onClick);
<textarea class="form-control" id="simpleMde" name="message"></textarea>
<button id="btn">Submit Message</button>
From your code, it looks like that you are getting the value the instant the code loads. Since the textarea is initially empty, that will log an empty string. However, you can add an event listener to listen for user input in the textarea, and take your action from then on.
var textarea = document.querySelector("textarea")
textarea.addEventListener("input", evt => {
console.clear()
console.log(evt.target.value);
})
<label>Message</label><br>
<textarea class="form-control" id="simpleMde" name="message"></textarea>
In this example, every time you provide an input inside the textarea, the input event fires. Inside the event listener, you can see that the console is cleared, and the new value is logged.

Change button back to original name after clicking [duplicate]

This question already has answers here:
Button text toggle in jquery
(10 answers)
Closed 7 years ago.
So, I have the following jQuery code that slides a list up to replace another list when a button is clicked. The button's text is then changed to "dev languages" so that the user knows to click the button again to go back to the original list. When the user clicks the button again to go back to that original list how do I get the button to change back to it's original text?
$(document).ready(function() {
$(".projects").on("click", function(){
$(".devList").slideToggle();
$(".devButton").slideToggle();
$(".projects").text("Development Languages");
});
});
There are many ways to do this, the simplest of which is to use the .text() method to retrieve the current text of the button and test it:
var currentText = $(this).text();
if (currentText === "Development Languages")
$(this).text("Whatever the old label was");
else
$(this).text("Development Languages");
However, you may not want to have to hard-code the different labels within your JavaScript. So you could put it in the markup like this:
<button class="projects" data-alternate-label="Development Languages">Click me</button>
...and then have more generic JavaScript that checks the data- attribute to see what the alternate label is when clicked, storing the previous text for use after the next click:
var $this = $(this),
alternateLabel = $this.data("alternate-label");
$this.data("alternate-label", $this.text());
$this.text(alternateLabel);
That way you could have multiple buttons with associated lists on the same page and still only need the one click handler to manage them, as shown here: http://jsfiddle.net/c5584bgr/2/
You can check what the current text is and change it depending on the state:
if ($(".projects").text() === "Development Languages") {
$(".projects").text("New Text");
} else {
$(".projects").text("Development Languages");
}

How to add new text field when button is clicked [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to create a form for my client. My client require to create a dynamic for him.
Suppose, I want to insert 1 record in main table of mysql, and record multiple records in secondary table which has reference key of main table. I don't know how many records against the main table, it maybe one at time or multiple records at time. I want to do it with single form. If client click add more button it show another text field to insert more data.
how I can do it ?????
It would be possible using pure javascript
like this
<input type="button" onclick="addInput()"/>
<span id="responce"></span>
<script>
var countBox =1;
var boxName = 0;
function addInput()
{
var boxName="textBox"+countBox;
document.getElementById('responce').innerHTML+='<br/><input type="text" id="'+boxName+'" value="'+boxName+'" " /><br/>';
countBox += 1;
}
</script>
This is possible through the jquery/javascript.
So you can use this reference :http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
Just try it!!
here is the code:
function generateTextBox()
{
var mainDiv=document.getElementById('options');
alert(mainDiv);
var newBreak=document.createElement('br');
mainDiv.appendChild(newBreak);
for(var i=1;i<=4;i++)
{
var newTextBox=document.createElement('input');
var newBreak1=document.createElement('br');
var newBreak2=document.createElement('br');
var newBreak3=document.createElement('br');
var text = document.createTextNode("Option"+i);
newTextBox.type='text';
newTextBox.setAttribute('id','txtAddr'+i);
alert(newTextBox+"2");
mainDiv.appendChild(text);
mainDiv.appendChild(newTextBox);
mainDiv.appendChild(newBreak1);
mainDiv.appendChild(newBreak2);
mainDiv.appendChild(newBreak3);
}
}
This isn't php related, you'll need to dynamically add to the form using javascript.

Categories

Resources