Using Javascript User Input to Modify CSS

Question

I'd like to find a way to let the user input an integer and then have that value be taken to modify the width of a div. Is this possible? I can't find any resources on whether there's a way to do so.

        <div id="genderform" action=" "/>
        <form>
            What percentage of musicians do you think are men?<br>
            <input type="text" id="men"><br><br>
            What percentage of musicians do you think are women?<br>
            <input type="text" id="women"><br><br>
            <input type="submit" value="submit">
        </form>
    </div>
    <script>
        document.getElementById("genderform").onsubmit=function() {
        men = document.getElementById("men").value;
        women = document.getElementById("women").value;
        document.getElementById("text").innerHTML = "Results: <br>" + "Men: " + men + "%<br>Women: " + women + "%";
        return false;
        }
    </script>
    <p id="text">Results:</p>
    <div id="test" style="background-color: #ff0000; height:50px; width: 1px;">

This is what I have so far. I know one would use .style to modify the style of the selected div, but beyond that I'm not sure.

Thanks for the help.

Your code has nothing to do with a width of a div what div do you want to modify? — Adam Buchanan Smith
– Adam Buchanan Smith, Commented Dec 10, 2015 at 0:23

Patrick Moore · Accepted Answer · 2015-12-10 18:17:09Z

2

Your code is malformed in several ways. <form> is not self-closing (it should not end in />). <div> does not support action property (<form> does).

You can adjust CSS width property by setting .style.width:

document.getElementById("div").style.width = women + "%";

Here's a fiddle showing in action: http://jsfiddle.net/L9xuj7mj/

Here is the entire code, with your mistakes cleaned up:

    <form id="genderform" action="" >
        What percentage of musicians do you think are men?<br />
        <input type="text" id="men" /><br /><br />
        What percentage of musicians do you think are women?<br />
        <input type="text" id="women" /><br /><br />
        <input type="submit" value="submit" />
    </form>
<p id="text">Results:</p>
<p id="div" style="background-color: #ff0000; height:50px; width: 1px;"></p>

<script type="text/javascript">
    document.getElementById("genderform").onsubmit=function() {
    men = document.getElementById("men").value;
    women = document.getElementById("women").value;
    document.getElementById("text").innerHTML = "Results: <br>" + "Men: " + men + "%<br>Women: " + women + "%";
            document.getElementById("div").style.width = women + "%";
    return false;
    }
</script>

edited Dec 10, 2015 at 18:17

answered Dec 10, 2015 at 0:29

Patrick Moore

13.4k5 gold badges41 silver badges63 bronze badges

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

1 Comment

Shay Fleming Over a year ago

Thank you! I'm very unfamiliar with javascript, and I appreciate the help immensely.

Adam Buchanan Smith · Accepted Answer · 2015-12-10 00:29:52Z

0

I used your form and created a new hybrid of it lol http://jsfiddle.net/afSK8/193/

 function change() {
        men = document.getElementById("men").value;
        women = document.getElementById("women").value;

        document.getElementById('mod').style.width = men + "px";
        document.getElementById('mod').style.height = women + "px";

        }

answered Dec 10, 2015 at 0:29

Adam Buchanan Smith

9,4575 gold badges21 silver badges39 bronze badges

Comments

Isaiah Lee · Accepted Answer · 2015-12-10 00:39:23Z

0

You're almost there.

var numMen = document.getElementById('men').value;
document.getElementById('div').style.width = numMen + 'px';

A couple thoughts here:

you could add some CSS transitions to make the bar animate nicely.
giving a "p" element an id of "div" doesn't make sense. try to name it more accurately.
you might want to add a multiplier to the number you extract from the form. Increasing the bar by 1px for each person might not be wide enough.

Hope this helps.

answered Dec 10, 2015 at 0:39

Isaiah Lee

6873 gold badges10 silver badges19 bronze badges

Collectives™ on Stack Overflow

Using Javascript User Input to Modify CSS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related