Simple generate button with html and javascript and save after finish

Question

I try to generate a simple button by HTML and JavaScript. Unfortunately, I don't know how to it with JavaScript to catch to value from input range HTML to apply for button. How could I use JavaScript to catch value from HTML range? this is my html code:

<form name='frm'>
<div id="div">
    <label>
        Width:
        <input type="text" id="MyText"/>
        <input type="range" id="MyRange" oninput="myfunc()"/>
    </label><br/>
    <label>
        Height:
        <input type="text" id="height"/>
        <input type="range" id="heights" oninput="myfunc()"/><br/>
    </label><br/>
    <label>
        Background:
        <input type="text" id="bdg"/>
        <input type="color" id="background"/>
       <!--/* <input type="range"/>
        <input type="imge" name="imge"/>*/-->
    </label><br/>
    <label>
        Radius:
        <input type="text" name="rad" id="Radius"/>
        <input type="range" name="rad" id="Rd"/><br/>
    </label><br/>
    <label>
        Margin:
        <input type="text" name="margin" id="margin"/><br/>
    </label><br/>
    <label>
        Padding:
        <input type="text" name="padding" id="padding"/><br/>
    </label><br/>
    <label>
        Box-shadow:
        <input type="text" name="shadow" id="shadow"/><br/>
    </label><br/>
</div>
<div id="div">
    <label>
        Color:<br/>
        <input type="text" name="col" id="color"/>
        <input type="color" id="colors"/><br/>
    </label>
    <label>
        Border-width:<br/>
        <input type="text" name="bdwidths" id="bw"/>
        <input type="range" id="bdw"/><br/>
    </label>
    <label>
        Border-style:<br/>
        <input type="number" name="bdstyle" id="bdstyle"/><br/>
    </label>
    <label>
        Border-color:<br/>
        <input type="number" name="bdcol" id="bdcolor"/>
        <input type="color" id="color"/><br/>
    </label>
    <label>
        Text-align:<br/>
        <input type="number" name="aligns" id="ta"/><br/>
    </label> 
    <label>
        Font-size:<br/>
        <input type="number" name="font" id="font"/>
        <input type="range" id="font-size"/><br/><br/>
    </label>
    <label>
        <input type="button" value="save change" onclick="save()"/>
    </label>
</div>
</form>

My Button

I didn't understand your question properly. do you want your code to generate a <button> with width and height set in the two input fields by the user?? — Rohit Kumar
– Rohit Kumar, Commented Jul 26, 2015 at 12:26
As Barmar has pointed out, you can give elements ID's so you can access them or you can use document.frm['widths'].value you will need to keep the names unique. Personally I would give the elements ID's. I'm just posting this as a second solution. If you don't keep the elements names unique you can access them using document.frm['widths'][0].value - document.frm['widths'][1].value The first element with will use [0] and the second will use [1]. I'm sure you can work out how that increments. — NewToJS
– NewToJS, Commented Jul 26, 2015 at 12:35
@Barmar Because I want to show the value of range on this input or I can type value to the input text. — Pherum Chheang
– Pherum Chheang, Commented Jul 26, 2015 at 12:43
@RohitKumar Yes, I do. I want the button generate width, height automatically when I change to range or type the value in the input text. — Pherum Chheang
– Pherum Chheang, Commented Jul 26, 2015 at 12:45

NewToJS · Accepted Answer · 2015-07-26 13:39:07Z

2

To trigger the javascript function you need to listen for changes/events.

This is using the oninput attribute. This will trigger/call the javascript function myfunc each time the range has a new input.

This is now using id attributes, not name attributes.

document.getElementById('') Is used to target the element document.getElementById('').value is used to target the elements value.

function myfunc(){
//Assign a variable to the MyRange element.
	var MyVariable= document.getElementById('MyRange');
//Target the MyText input and change the value to the value of MyVariable.
	document.getElementById('MyText').value=MyVariable.value+'px';
//Target MyBtn's style - width
document.getElementById('MyBtn').style.width=MyRange.value+'px';
}

Width:<input type="text" id="MyText"/><br/>
<input type="range" id="MyRange" oninput="myfunc()"/>
<button id="MyBtn">My Button</button>

If you don't understand any of the source code please leave a comment below and I will explain it line by line for you so you understand how this works. It's better to understand how something works rather than copy/paste and hope for the best.

Javascript should be placed inside of script tags

<script type="text/javascript"> //Place Javascript Here.... </script>

I hope this helps. Happy coding!

edited Jul 26, 2015 at 13:39

answered Jul 26, 2015 at 12:58

NewToJS

2,7723 gold badges17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Pherum Chheang Over a year ago

Thank for your help but when change place of range, it will check the pixel and apply it to width of button(increase button width).

NewToJS Over a year ago

@PherumChheang You want the range to change the width of the button? Your question is "how to catch the value of the range" this example shows how to do that. I'm not sure what it is you're wanting with the button. Can you be more clear please? I will edit the answer as your question becomes more clear to what you wish to achieve.

Pherum Chheang Over a year ago

Yes, I want the range to change the width of the button. but I don't know how to do it with JavaScript to complete it. And I put the value input text to in px to apply the button

Pherum Chheang Over a year ago

Yes, it works well with this. But if I have only input type text what should I do. Padding: <input type="text" name="padding" id="padding"/><br/>

NewToJS Over a year ago

@PherumChheang What do you mean if you input text? Your question is how to get the range and display it in the input text box, then you wanted it to change the width of the button. If you wish the expand your question can you give full details on what you wish to achieve. This will save multiple edits on answers. If this answers your question, marking it would be appreciated too.

|

Barmar · Accepted Answer · 2015-07-26 12:26:08Z

0

Give the element an ID so you can access it:

<input type="range" id="widthrange" name="widths"/>

Then in your Javascript, you can do:

var width = document.getElementById("widthrange").value;

answered Jul 26, 2015 at 12:26

Barmar

789k57 gold badges555 silver badges669 bronze badges

Collectives™ on Stack Overflow

Simple generate button with html and javascript and save after finish

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related